ngFor 비동기 파이프에 관측 가능이 아닌 관측 가능이 필요한 이유

ngFor 비동기 파이프에 관측 가능이 아닌 관측 가능이 필요한 이유

다음과 같은 템플릿이 있다.

*ngFor="let contact of contacts | async"

위치:

contacts: Observable<any>;

다음 오류가 발생하는 경우:

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

ngFor 비동기 파이프에 필요한 이유Observable<any[]>대신에Observable<T>?

이것은 그 때문은 아니다.async파이프를 치다

그contacts관측 가능은 배열 대신 물체를 방출하며, 당신은 물체를 반복할 수 없다.*ngFor. 에러메시지에는 그렇게 적혀 있다.

그래서 문제는 에 있다.contacts그것이 실제로 무엇을 발산하는지 한번 보십시오.

ngFor는 수많은 '컨택트(contacts)'를 볼 필요가 있으며(@martin에서 이미 언급된 바와 같이), 이는 또한 그것이 반복하고 있는 것의 범위, 즉 얼마나 많은 항목을 표시하려고 하는지를 알 필요가 있다는 것을 의미한다.

앞으로 가장 간단한 방법은 다음 항목을 사용하는 다른 속성을 추가하는 것이다.toArray()구성 요소에 대한 연산자 및 템플릿에 해당 연산자를 사용하십시오.

템플릿.

<div *ngFor="let contact of contactsList | async">
  From contactsList: {{contact}}
</div>

구성 요소

contactsList = this.contacts.toArray();

단, 연락처 관찰이 완료되기 전에(즉, 각 연락처를 내보낸 경우 ngFor에 추가) 어떤 것을 표시하려면 버퍼링 관찰이 필요하다.

private buffer = []; 
contactsList = Observable.of(this.buffer); 

ngOnInit() {
  this.contacts.subscribe(contact => {
    this.buffer.push(contact)
  })
}

데모: StackBlitz

참조URL: https://stackoverflow.com/questions/48346774/why-ngfor-async-pipe-needs-observableany-instead-of-observableany