Angular 9 приложение «NgFor поддерживает только привязку к итерируемым объектам, таким как массивы» - PullRequest
Новая
       49

Angular 9 приложение «NgFor поддерживает только привязку к итерируемым объектам, таким как массивы»

0 голосов
/ 02 мая 2020

Я работаю над приложением "Контакты" с Angular 9. Я получаю список контактов через следующую службу: 

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

import { Contact } from '../models/Contact';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
}

@Injectable({
  providedIn: 'root'
})

export class ContactsListService {

  contactsUrl = 'https://randomuser.me/api/?&results=500&inc=name,location,email,cell,picture';

  constructor(private http:HttpClient) { }

  getContcts():Observable<Contact[]> {
    return this.http.get<Contact[]>(`${this.contactsUrl}`);
  }

}

Компонент Список контактов выглядит следующим образом: 

import { Component, OnInit } from '@angular/core';
import { from } from 'rxjs';
import { ContactsListService } from '../../services/contacts-list.service';
import { Contact } from '../../models/Contact';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
})

export class ListComponent implements OnInit {

  contactsList:Contact[];

  constructor(private ContactsListService:ContactsListService) { }

  ngOnInit(): void  {
      this.ContactsListService.getContcts().subscribe(contactsList => {
        this.contactsList = contactsList;
      });

  }
}

Попытка перебрать список контактов таким образом 

<ul *ngFor="let contact of contactsList">
    <li>{{contact.name.first}}</li>
</ul>

выдает ошибку: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Это очень вероятно означает, что contactsList не является массив.

Что я делаю не так?

Ответы [ 2 ]

3 голосов
/ 02 мая 2020

URL возвращает объект в форме 

{
  results: [],
  info: {}
}

Используйте Rx JS map для сопоставления results, полученного из API.

Служба 

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

import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';

import { Contact } from '../models/Contact';

export class ContactsListService {
  contactsUrl = 'https://randomuser.me/api/?&results=500&inc=name,location,email,cell,picture';

  constructor(private http:HttpClient) { }

  getContcts():Observable<Contact[]> {
    return this.http.get<Contact[]>(`${this.contactsUrl}`)
      .pipe(map(response => response['results']));
  }
}

Назначить пустой массив contactsList при объявлении.

Компонент 

import { Component, OnInit } from '@angular/core';

import { from } from 'rxjs';

import { ContactsListService } from '../../services/contacts-list.service';
import { Contact } from '../../models/Contact';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
})

export class ListComponent implements OnInit {
  contactsList: Contact[] = []; // assign empty array

  constructor(private ContactsListService:ContactsListService) { }

  ngOnInit(): void  {
    this.ContactsListService.getContcts().subscribe(
      contactsList => { this.contactsList = contactsList; },
      error => { // always good practice to handle error when subscribing to HTTP observables }
    );
  }
}
0 голосов
/ 02 мая 2020

Похоже, что конечная точка 'https://randomuser.me/api/?&results=500&inc=name, местоположение, электронная почта, ячейка, картинка ' не возвращает массив. Чтобы проверить это, вы можете открыть его в браузере или проверить вкладку сети инструментов разработчика chrome, когда ваше приложение работает

...