角度4. ngForとasyncの問題

Question

私は非同期パイプとngFor指示をAngular 4.4で使用しようとしました。 それはうまく動作しますが、コンソールに奇妙なエラーメッセージが表示されます：

"エラー：オブジェクト 'オブジェクト'の[オブジェクトオブジェクト]が見つかりません。

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

私はPlunkerであなたのエラーを再現

Answer 1

を教えてください：

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

をエラーを作成するために、私は私のサービスメソッドが予想される配列の代わりにオブジェクトを返す作っ：

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

次に、コンポーネントから：すでにJB Nizetがあなたの記事下のコメントで述べ

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

そして、私は

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

を得たとして、あなたはあなたが本当にのfindAllメソッドから返さかどうか確認する必要があります。