Question

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

“错误：无法找到'object'类型的不同支持对象'[object Object]'。NgFor仅支持绑定到诸如Arrays之类的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();
  }
}

请告知

Answer 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();
  }
}

我得到了

找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39 ;. NgFor仅支持绑定到Iterables，例如Arrays。

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

Angular 4. ngFor和async问题

1 个答案: