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方法真正返回的內容。