Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
Bonjour,
Je débute avec Angular et j'essaie de créer un frontend pour une ancienne application en Django.
Le serveur API est un Django Rest Framewrok.
Je tente de récupérer les données en ayant mis en place la pagination.
Les données retournées sont de la forme :
Code:
1
2
3
4
5
6
| Object {
count: 2530
next: "http://localhost:8000/archives/api/archive/?page=2"
previous: null
results: Array(50) [ 0: Object { id: 2727, service_id: 1, nomService: "Service ...", … }]
} |
Par conséquent, j'en ai déduis ce modèle là :
Code:
1
2
3
4
5
6
7
8
| export class Donnees {
constructor (
public count: number,
public next: any,
public previous: any,
public results: Archive[]
) { }
} |
j'ai créé le service suivant :
Code:
1
2
3
| getDonnees(APIUrl: string): Observable<Donnees> {
return this.http.get<Donnees>(APIUrl)
} |
Dans le composant.ts, j'utilise la fonction ci-dessous :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
getDonnees(url: string) {
this.archivesService.getDonnees(url)
.subscribe(response => {
this.archives = response.results;
if (response.next) {
this.next = response.next;
}
if (response.previous) {
this.previous = response.previous;
}
});
} |
Enfin, dans le componant.html, j'affiche les données avec :
Code:
1
2
| <tbody>
<tr *ngFor="let archive of archives"> |
ça fonctionne. Les données s'affichent correctement mais j'obtiens le message suivant :
Citation:
"Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed"
Mes recherches sur Internet ne m'ont pas permis de trouver la solution.
Il semblerait qu'il faille utiliser "map".
Pouvez-vous m'aider ? Merci.
Patrice
Resultat {{ archives | json }}
Le résultat de {{ archives | json }} est :
Code:
1
2
3
4
5
6
| [
{ "id": 2727, "service_id": 1, "nomService": "Services Techniques", "abbService": "ST", "reference_id": 10… },
{ "id": 2726, "service_id": 2, "nomService": "Ressources Humaines", "abbService": "RH", "reference_id": 99, "nomReference": "----------", …. },
{ "id": 2725, "service_id": 2, "nomService": "Ressources Humaines", "abbService": "RH", "reference_id": 99, "nomReference": "----------", …. },
….
] |
