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); 
  }

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

问题是从last调用addpic后将无法正常工作。即使添加了照片，它也永远不会到达最后一张照片。如果我把

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

last中addpic中的

仍然不起作用。它总是倒数第二张照片（如果我有3张照片，则在添加第四张照片后总是第三张照片）

但是，如果我按下最后一个按钮或使用轮播用户界面中的箭头，则此将会起作用。

这让我认为，在打字稿中调用last时，HTML或数组不会以某种方式“刷新”，但是按钮会刷新/创建显示正确照片所需的HTML吗？

我不知道它是什么，但我现在几乎可以肯定它与刷新的html / typescript有关。我认为这是一个尖锐的问题，而不是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()，它的感觉不那么“ hacky”。（{Documentation，以及此处的相关问答：What's the difference between markForCheck() and detectChanges()）

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

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

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

2 个答案: