角度 6 刷新数组和模板中的 ngFor

Question

>我使用角度6，我有一个ngbCarousel，我想通过单击按钮添加照片。

我使用ngFor来创建轮播的 HTML。

<ngb-carousel #carousel *ngIf="images">
<ng-template ngbSlide *ngFor="let im of images; let i = index">
<img [src]='im.link' >
<div>
<input type="text" value={{im.name}} >    
<input type="text" value='description of img' >    
<input type="text" value='copyright owners' >          
<button type="button" (click)='deletepic(i)'>delete</button>   
</div>
</ng-template>
</ngb-carousel>
<button type="button" (click)='addpic()'>add</button> 
<button type="button" (click)='last()'>last</button> 

包含 JSON 的images数组就是此images= [{'link':'https://picsum.photos/900/500/?image=5','name':'first'},{'link':'https://picsum.photos/900/500/?image=574','name':'second'},{'link':'https://picsum.photos/900/500/?image=547','name':'third'}];，单击addpic时，将在数组中添加另一个 json。

addpic(){
this.images.push({'link':'https://picsum.photos/900/500/?image=7','name':'added one'});     
this.last()        ;   
}

此外，它必须强制轮播显示最后一张新添加的照片。根据 API 我必须使用select按 id 导航到幻灯片，并且 id 是模式ngb-slide-0。

因此，last包含

last(){
let slide = 'ngb-slide-'+String(this.images.length-1);    
this.carousel.select(slide); 
}

最后一张照片通常会添加到轮播中

问题是从addpic调用时last将不起作用。它永远不会转到最后一张照片，即使添加了照片也是如此。如果我把

let slide = 'ngb-slide-'+String(this.images.length-1);    
this.carousel.select(slide); 

addpic中的last仍然不起作用。它总是转到倒数第二张照片(如果我有 3 张照片，它总是转到第 3 张照片，在添加第 4 张照片后(

但是，如果我点击最后一个按钮或使用轮播 UI 中的箭头，这将起作用。

这让我认为，当在打字稿中调用last时，HTML 或数组不知何故没有"刷新"，但不知何故，按钮刷新/创建显示正确照片所需的 HTML？

我不知道它是什么，但现在我几乎可以肯定它与刷新的html/打字稿有关。我认为这是一个角度问题，而不是 ngbCarousel 问题。我不知道如何调试或继续。

请指教。谢谢

Answer 1

在 addpic(( 方法的数组中添加图片后，它们需要一点时间才能在 html 中反映为模板，因此在超时时调用最后一个方法，例如

addpic(){
this.images.push({'link':'https://picsum.photos/900/500/?image=7','name':'added one'});     
setTimeout(() => {
this.last();
});
}

Answer 2

您可以使用setTimeout在Angular检测到更改后强制执行last方法，如Paresh Gamis的答案所示。

但我认为你也可以在这种情况下使用ChangeDetectorRef.detectChanges()，感觉不那么"黑客"。(文档和相关问答在这里：markForCheck((和detectChanges((有什么区别(

在last通话之前使用它。

我不确定它是否适用于您的情况(如果您提供 StackBlitz 最小示例，我们可以处理细节(