angular2에서 DOM 교체를 방지하는 방법 angfire2에서 async를 사용 하시겠습니까?

Question

나는 angularfire2를 사용하는 angular2 앱에 비동기 메시지 목록을 가지고 있습니다.

<message *ngFor="let message of messages | async" [message]="message"></message> 

목록에서 ngFor의 모든 요소가 업데이트되면 다시 렌더링됩니다. 목록의 새 항목을 다시 렌더링 할 수 있습니까?

Answer 1

데이터를 검색 할 때 객체의 실제 참조를 변경 했으므로 ngFor은 모든 DOM 노드를 다시 그리기 때문에 재 렌더링이 발생합니다. 이 경우 여기 trackBy을 사용하면 *ngFor을 더 똑똑하게 만들 수 있습니다.

trackBy이 고유 ID 열을 기반으로해야합니다, 귀하의 경우에 나는 이것이 내가 본 최고의 솔루션입니다 message.id

<message *ngFor="let message of messages | async;trackBy:trackByFn" [message]="message"></message> 

코드

trackByFn(message: any){ 
    return message != null ? message.id: null; 
} 

Answer 2

것입니다 말할 수 있습니다. trackByFn` 대신`trackBy = trackByFn`의 : jeffbcros

https://github.com/angular/angularfire2/issues/540#issuecomment-248780730

class MyComponent { 
    trackFbObjects = (idx, obj) => obj.$key; 
} 

<message *ngFor="let message of messages | async; trackby: trackFbObjects " [message]="message"></message>