Как визуализировать данные, используя ngFor полученный через http сервис? - PullRequest
Новая
       57

Как визуализировать данные, используя ngFor полученный через http сервис?

2 голосов
/ 01 октября 2019

Я пытался внедрить службу (contact.service.ts) в компонент (contact-list.component) Служба (или данные), которые я пытаюсь предоставить компоненту, - это сведения о сотрудниках (определенные в contacts.ts). ,Я успешно получил данные, но не смог обработать их с помощью ngFor

--------- contacts.ts --------------- 

export interface Contacts {
  contactsList: Contact[];
}

export interface Contact {
  id: number;
  name: string;
  city: string;
}

------------ contact.service.ts ----------- 

import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Contacts } from '../models/contacts';

// @Injectable({
//   providedIn: 'root'
// })

export class ContactService {
  url = 'http://www.mocky.io/v2/5c5d880f3200000e11220880';

  constructor(
    private http: HttpClient
  ) { }

  getContacts(): Observable<Contacts> {
    // make http request to the given url and fetch the contacts
   // return of({contactsList: []});
    return this.http.get<Contacts>(this.url);
  }
}

----------- contact-list.component -------------- 

import { ContactService } from 'src/app/services/contact.service';
import { Contacts } from 'src/app/models/contacts';

@Component({
  selector: 'app-contact-list',
  templateUrl: './contact-list.component.html',
  styleUrls: ['./contact-list.component.css']
})
export class ContactListComponent implements OnInit {

  contacts;
  constructor(
    private _contactService: ContactService
  ) { }

  ngOnInit() {
      this._contactService.getContacts()
    .subscribe(data => this.contacts=data);

  }

}

Вот что я пытался отрендерить 

<p class="title"> Contact Applications </p>
<div class="list">
  <p *ngFor="let contact of contacts">
    {{contact.name}}
  </p>
</div>

ипривело к этой ошибке 

ERROR: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Ответы [ 4 ]

0 голосов
/ 01 октября 2019

В вашем ContactListComponent объявите: 

contacts: Contacts;

и на своей странице: 

<p *ngFor="let contact of contacts.contactsList">
    {{contact.name}}
</p>

В любом случае, вы все равно можете изменить код для использования Contact[], вы необязан использовать Contacts интерфейс

0 голосов
/ 01 октября 2019

Посмотрите на данные, поступающие из API: это не массив, это объект, содержащий массив. Поэтому вы должны 

this._contactService.getContacts()
    .subscribe(data => this.contacts = data.contactsList);
0 голосов
/ 01 октября 2019

Я не вижу, какой тип переменных контактов находится в вашем компоненте, и вы пытаетесь получить к нему доступ как к типу Контакт в вашем шаблоне. Так что можно попробовать ниже 

export class ContactListComponent implements OnInit {

  contacts : Contacts; // declaring contacts as Contacts type will enable accessing its properties
0 голосов
/ 01 октября 2019

Как показано ниже: 

<div *ngFor="let contact of contacts;let i = index;">
     {{contact.[field_name]}}
</div>

Но я думаю, что нам нужно проверить данные. Пожалуйста, console.log (this.contacts) и покажите его

...