Angular 6刷新阵列和模板中的ngFor

我使用angular 6，我有一个按钮，我想通过点击按钮添加照片

我使用

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> 

它还必须强制旋转木马显示最后一张新添加的照片。根据API，我必须使用

选择

通过其id导航到幻灯片，并且id的模式为

ngb-slide-0

所以，

last

包含

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

最后一张照片通常会添加到旋转木马中

问题是从

addpic

调用

最后一个
时将无法工作。即使添加了照片，也不会转到最后一张照片。如果我把

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

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

但是如果我点击最后一个按钮或者使用旋转木马UI中的箭头，这个将起作用

这让我想到，当在typescript中调用
最后一个
时，HTML或数组不会以某种方式“刷新”，但按钮会以某种方式刷新/创建显示正确照片所需的HTML

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

请给我一些建议。谢谢
在addpic（）方法中添加数组中的图片后，它们在html中以位时间作为模板进行反映，所以调用timeout中的最后一个方法

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

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

但是我认为您也可以使用
ChangeDetectorRef.detectChanges（）
在这种情况下，它感觉不那么“黑客”。（，以及此处的相关问答：）

在上次通话前使用它

我不确定它是否适用于您的情况（如果您提供StackBlitz最小示例，我们可以处理细节）
因此，它归结为JS事件循环问题
setTimeout
是一个肮脏的黑客，我和所有肮脏的黑客一样喜欢：）问题是第一次被调用时，我可以看到一个空白
div
的闪光，里面没有图像。
setTimeout
很棒，但有时会出现一个空转盘的闪光。关于
detectChanges
：听起来很棒，但我是一个棱角分明的新手，我不知道该做什么。逻辑是什么？检测HTML
ngb转盘是否已更改，然后调用
最后一个
？你能不能再详细说明一下，我会建立一个库存，或者随便你们这些孩子怎么称呼它。只是开玩笑，我正在设置StackBlitz对不起，我不知道这是空的，我导入了ng引导、
bootstrap.css以及组件中必要的导入。“它在我的机器里工作”。我试图找出@selvin的错误有两个错误我可以修复（现在我可以看到您的示例）。首先，您需要在组件（MapcmsService）中删除一个导入行，并在app.module.ts的导入中添加ReactiveFormsModule基本上，我只想尝试
this.changeDetectorRef.detectChanges（）；这个。最后一个（）而不是
设置超时（（）=>{this.last（）；}）很抱歉，有一个解决方案。我可以使用角度遍历
ng template ngbSlide
标记，获取最后一个，获取其id，并在
this.carousel.select上使用它（实际上是最后一张幻灯片）处理它
addpic(){
    this.images.push({'link':'https://picsum.photos/900/500/?image=7','name':'added one'});     
    setTimeout(() => {
        this.last();
    });
  }