J'ai un service comme celui-ci:
import { Component, OnInit, PipeTransform } from "@angular/core";
import { UserService } from "./service.service";
import { IUser } from "./users.model";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
@Component({
selector: "app-users",
templateUrl: "./users.component.html",
styleUrls: ["./users.component.css"]
})
export class UsersComponent implements OnInit {
allUsers: IUser[];
page = 1;
pageSize = 4;
collectionSize: any;
constructor(private userService: UserService) {}
ngOnInit() {
this.userService.getUsers().subscribe((data: any[]) => {
this.collectionSize = data.length;
this.allUsers = data;
});
}
get users(): IUser[] {
// tslint:disable-next-line:max-line-length
return this.allUsers.map((user, i) => ({ id: i + 1, ...user
})).slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize
+ this.pageSize);
}
}
4 Réponses :
essayer d'initialiser allusers variable avant d'attribuer des données:
Cela se produit car les getters en angulaire sont réévalués chaque fois que la détection de changement se produit. Comme Une solution possible consiste à initialiser Allusers code> est peuplé de manière asynchrone, il y a un certain temps quand il est indéfini. C'est pourquoi vous obtenez cette erreur. allusers code> comme tableau vide afin qu'il ne soit jamais non défini. P> return this.allUsers.map((user, i) => ({ id: i + 1, ...user
})).slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize
+ this.pageSize);
}
Vous faites un appel asynchrone à votre API. Cela signifie que votre récupération peut prendre beaucoup de temps. Bien que votre appel soit en traitement, Dans une seconde fois, lorsque votre opération asynchrone est terminée, ceci.Anutilisateurs reste non défini .
C'est pourquoi vous obtenez cette erreur.
ceci.Alutilisateurs est plein et la détection de changement sur la référence est performante. Cela explique pourquoi vous obtenez toutes vos données dans la table. Mais l'erreur s'est également produite auparavant.
Au lieu d'ajouter une solution supplémentaire la plus courte solution possible pour cela pourrait être initialiser allusers code> lorsque vous les définissez, il suffit simplement de modifier allUsers: IUser[]=[];
Les données de vos utilisateurs sont indéfinies
Je dirais que vous essayez d'appeler
utilisateurs () avant d'obtenir le résultat de l'abonnement àuserservice.getuers () . Comme c'est un appel asynchrone, vous devez attendre l'obtention du résultat pour renseignerceci.Alutilisateurs .