Angular 6刷新数组和模板中的ngFor

Question

我使用 angular 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 张照片，它总是排到第三张，在添加第四张之后）

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

这让我觉得当在打字稿中调用last 时，HTML 或数组没有“刷新”，但按钮刷新/创建显示正确照片所需的 HTML？

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

请指教。谢谢

Answer 1

在 addpic() 方法中将图片添加到数组中后，它们需要一些时间来反映在 html 中作为模板，因此在超时时调用 last 方法，如

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()，感觉不那么“hacky”。 （Documentation，以及相关问答：What's the difference between markForCheck() and detectChanges()）

在您的 last 通话之前使用它。

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