angular - ts(6385) prenumerera på föråldrad

Jag får ett felmeddelande om att subscribe är föråldrad. Den första är min API-tjänst men problemet ligger i den andra delen av koden för funktionen getStarwarsHeroes. .subscribe är överstruken och jag får föråldrat-felet.

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable} from 'rxjs';

export interface ApiResult {
  page: number;
  results: any[];
  total_pages: number;
  total_results: number;
}


@Injectable({
  providedIn: 'root'
})

export class ApiService {
constructor(private http: HttpClient) {}

    getStarwarsHeroes(page:number =1): Observable <ApiResult> {
      return this.http.get<ApiResult>(`https://swapi.dev/api/people/${page}/`);
    }

    getStarwarsDetails(id:string): Observable<any>{
      return this.http.get<ApiResult>(
        `https://swapi.dev/api/people/${id}/`
      );
    }

  }

Min sida där jag vill visa Star Wars-karaktärerna: Först TS-filen:

import { Component, OnInit } from '@angular/core';
import { ApiService} from '../api.service';
import { InfiniteScrollCustomEvent, LoadingController} from '@ionic/angular';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit { 

  starwars:any=[];
  currentPage:number= 1;

  constructor(
    private apiService:ApiService,
    private loadingCtrl: LoadingController
    ) {}

  ngOnInit() {
      this.loadStarwars();  
  }
    
  async loadStarwars(event?: InfiniteScrollCustomEvent) {
    const loading= await this.loadingCtrl.create({
      message: 'Loading..',
      spinner: 'bubbles',
    });
    await loading.present();
    
    this.apiService.getStarwarsHeroes(this.currentPage).subscribe(
      (res) => {
        loading.dismiss();
        this.starwars.push(...res.results);

 console.log(this.starwars);

        event?.target.complete();
        if (event) {
          event.target.disabled = res.total_pages === this.currentPage;
        }
      },
      (err) => {
        console.log(err);
        loading.dismiss();
      }
    );
  }

  loadMore(event: InfiniteScrollCustomEvent) {
      this.currentPage++;
      this.loadStarwars(event);
    }
}

Sedan HTML-filen:


<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      StarWars Characters
    </ion-title>
    <ion-button slot="start">
    <ion-menu-button menu="main-menu"></ion-menu-button>
    </ion-button>
  </ion-toolbar>
</ion-header>

<ion-content>

 <ion-card 
 *ngFor='let item of starwars'
 [routerLink]="[item.id]"
 >
    <ion-card-header>
      <ion-card-title slot="start">{{item.name}}</ion-card-title>
    </ion-card-header>
    <ion-card-content slot="end">{{item.gender}}    </ion-card-content>
  </ion-card>
</ion-content>

Svar #1

Istället för att skicka in en next-funktion och en error-funktion, skicka in ett objekt med en next-funktion och en error-funktion som egenskaper på objektet.

subscribe({
  next: (res) => {
    loading.dismiss();
    this.starwars.push(...res.results);

    console.log(this.starwars);

    event?.target.complete();
    if (event) {
      event.target.disabled = res.total_pages === this.currentPage;
    }
  },
  error: (err) => {
    console.log(err);
    loading.dismiss();
  }
})

Det föråldrade meddelandet beror på att detta nu är den föredragna metoden för att skicka in flera funktioner, du kan fortfarande skicka in en enda next-funktion om du inte behöver de andra funktionerna.

Relaterade artiklar