角度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

回答

相关问题