角度2監聽/檢測DOM呈現元素來自* ngFor

當角度2完成從* ngFor啓動呈現dom元素時，是否有方法檢測/偵聽事件/鉤子？角度2監聽/檢測DOM呈現元素來自* ngFor

例如我有這個列表：

<ul> 
    <li *ngFor="let item of items"> 
    <span>{{item.name}}</span> 
    <img [src]="item.url"> 
    </li> 
</ul>

項目最初是空的，並在http req之後填充。完成：

items = []; 

ngOnInit(): void { 
    console.log('start') 
    this.svc.getItems() // http service call 
    .subscribe(
     items => { 
     this.items = items; 
     console.log('done'); 
     }, 
     err => this.handleError(err) 
    ); 
}

我需要顯示'開始'和'完成'之間的某種加載。我認爲當它被記錄爲「完成」時，一切都完成了，但事實並非如此。 * ngFor渲染元素和獲取圖像需要一段時間。

那麼有沒有一種方法來檢測* ngFor是否完成並且圖像被提取？

來源

2016-11-28 Petr Marek

https://plnkr.co/edit/rcNm54oVWeLPkpBwUAsw?p=preview – yurzui

這有效，但它有點骯髒我會說:)我需要更多的一般方法，可用於不同的組件（例如。elems像視頻，音頻，img）。 thx –

沒有鉤子。 *ngFor也會在items更改時始終更新。

你可以做的是調用detectChanges

constructor(private cdRef:ChangeDetectorRef) {} 

ngOnInit(): void { 
    console.log('start') 
    this.svc.getItems() // http service call 
    .subscribe(
     items => { 
     this.items = items; 
     console.log('done'); 
     }, 
     err => this.handleError(err), 
    () => { 
     this.cdRef.detectChanges(); 
     console.log('done') 
     } 
    ); 
}

據我知道這synchronically導致DOM被更新。

對於您的用例，您可以省略this.cdRef.detectChanges();，因爲在完成的回調中調用console.log('done')後，Angular2將立即運行變更檢測。

來源

2016-11-28 14:08:41

這種方式首先'完成'被記錄，但之後，它需要一段時間來渲染添加項目（獲取圖像），所以如果我隱藏加載器將有時間「差距」，並且用戶將看到沒有圖像和沒有加載器 –

你能請嘗試注入'ApplicationRef'並調用它的'tick（）'而不是？ –

在完整的塊？如果是的話，那麼這個塊不會被調用，因爲我在組件和http之間的中間服務中使用了BehaviourSubject。然而下一個塊被稱爲兩次..當圖像加載時，這很奇怪... –

角度2監聽/檢測DOM呈現元素來自* ngFor

回答

相關問題