如何使用通过 http 服务接收的 ngFor 呈现数据？

Question

我尝试将服务(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);
  }
}

---------联系-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.

Answer 1

如下所示：

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

但我认为我们需要检查数据。请console.log(this.contacts)并出示

Answer 2

查看来自API的数据：它不是一个数组，它是一个包含数组的对象。因此你应该

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

Answer 3

我看不到你的组件中有什么类型的变量联系人，而你正试图在你的模板中访问它作为联系人类型。所以可以试试下面

export class ContactListComponent implements OnInit {

  contacts : Contacts; // declaring contacts as Contacts type will enable accessing its properties

Answer 4

在您的ContactListComponent声明中：

contacts: Contacts;

在您的页面中：

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

无论如何，你仍然可以重构代码来使用Contact[]，你没有义务使用Contacts接口

如何使用通过 http 服务接收的 ngFor 呈现数据？

how to render data using ngFor received throug http service?

interface

httpservice

typescript

angular