Angular 6 : Cannot find a differ supporting object '[object Object]' of type 'object' . NgFor 只支持绑定(bind)到 Iterables 之类的 Arrays

Question

我有一个组件从 Assets 文件夹加载本地 json 文件(仅包含名称)。由于 HttpClient 负责将数据格式化为 json，所以这里没有使用 map。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'

 export type cont= {name: string};

@Component({
  selector: 'my-app',
  template: `
    1st List
    <ul>
      <li *ngFor="let contact of contacts | async">{{contact.name}}</li>
    </ul>
    2st List
    <ul>
      <li *ngFor="let contact of contacts2 | async">{{contact.name}}</li>
    </ul>
    `
})
export class AppComponent {;
  contacts: Observable<cont[]>;
  contacts2: Observable<cont[]>;
  constructor (http: HttpClient) {
    this.contacts = http.get<cont[]>('http://localhost:4200/assets/contacts.json');               
    setTimeout(() => this.contacts2 = this.contacts, 500);
  }
}

联系人.json

 {
"items": [
  { "name": "Mark Twain" },
  { "name": "Sherlock Holmes" }
]

}

可以通过 http://localhost:4200/assets/contacts.json 在浏览器上获取数据但是当我尝试通过异步管道呈现相同的内容时，我在下面收到此错误。尝试了多种方法将 observable 转换为 Observable<[]> 但没有一个通过这种情况。 这里有什么问题。如何将 httpclient 上的 json 数据转换为 Array ？ ( 试图关注类似的帖子，但没有任何帮助 )？

Answer 1

您正在尝试迭代一个对象:

{
  "items": [
    { "name": "Mark Twain" },
    { "name": "Sherlock Holmes" }
  ]
}

你应该迭代 contacts.items

<ul>
  <li *ngFor="let contact of (contacts | async)?.items">{{contact.name}}</li>
</ul>

或者只是使用可观察的 map :

const url = 'http://localhost:4200/assets/contacts.json';
this.contacts = http.get<cont[]>(url).pipe(map(data => data.items)); 

使用 Symbol.iterator 的另一种解决方案

我添加它只是因为它是有趣的(在我看来)方法，尽管在这种情况下不实用。

我可以对异步对象进行迭代:

<ul>
  <li *ngFor="let contact of contacts | async">{{contact.name}}</li>
</ul>

但我将通过添加 iterable protocol 将此对象转换为可迭代对象:

const url = 'http://localhost:4200/assets/contacts.json';
this.contacts = http.get<cont[]>(url).pipe(
  map((data: any) => {
    data[Symbol.iterator] = () => data.items[Symbol.iterator]();
    return data;
  })
);

线

data[Symbol.iterator] = () => data.items[Symbol.iterator]()

将对象上的迭代(默认情况下不可能)重定向到其 items 上的迭代大批。

我创建了一个 STACKBLITZ证明这一点