Angular 4. ngFor和异步问题

Question

我试图在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();
  }
}

请指教

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

我得到了

找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables，例如数组。

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