Angular 4. ngFor 和异步问题答案

【问题标题】：Angular 4. ngFor and async issueAngular 4. ngFor 和异步问题
【发布时间】：2018-03-12 00:59:47
【问题描述】：

我尝试在 Angular 4.4 中使用异步管道和 ngFor 指令。它工作正常，但我在控制台中收到奇怪的错误消息：

“错误：找不到类型为“object”的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如数组。”

<table>
  <tbody>
  <tr *ngFor="let event of events | async">
  </tr>
  </tbody>
 </table>


export class EventsComponent {

  events: Observable<Array<Event>>;

  constructor(private eventService: EventService) {
      this.events = this.eventService.findAll();
  }
}

请指教

【问题讨论】：

*ngFor 只迭代数组，但不支持迭代对象。您可以使用stackoverflow.com/questions/41396435/… 中所示的管道
findAll() 返回的 observable 实际发出的事件似乎是对象，而不是数组。检查您从该方法真正返回的内容（在运行时）。
嗯，findAll 方法返回数组的 Observable。所以 ngFor 实际上显示返回的数据。唯一的问题是控制台中的错误消息。
这里是 findAll 函数的签名： findAll(): Observable> { return this.http.get>(this._baseUrl); }
签名无关。 TypeScript 仅在编译时检查类型。它无法确保您的后端服务实际返回表示事件数组的 JSON。所以它相信你。您需要检查它在运行时实际返回的内容。

标签： angular

【解决方案1】：

我在 Plunker 中重现了您的错误：

https://plnkr.co/edit/KpEnf2KOm8XJXurBTjFQ?p=preview

为了创建错误，我让我的服务方法返回一个对象而不是预期的数组：

findAll(): Observable<Array<string>> {
  return Observable.of({ data: ['Francis', 'Emilie', 'Diego'] });
}

然后，我从组件中调用了该方法：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <ul>
        <li *ngFor="let name of names | async">{{ name }}</li>
      </ul>
    </div>
  `,
})
export class App implements OnInit {

  names: string;

  constructor(private eventService: EventService) { }

  ngOnInit(): void {
    this.findAll();
  }

  findAll(): void {
    this.names = this.eventService.findAll();
  }
}

我得到了

找不到不同类型的支持对象“[object Object]” '目的'。 NgFor 只支持绑定到 Arrays 等 Iterables。

正如 JB Nizet 在您帖子下方的评论中所说，您应该检查您真正从 findAll 方法返回的内容。

【讨论】：

谢谢你，阿普。原来我在页面上有两个 *ngFor（桌面版和移动版）。第二个 *ngFor 错过了异步管道，因此它被隐藏但仍然引发错误。