4

我使用 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,我必须使用selectid 通过其 id 导航到幻灯片,并且 id 是 pattern ngb-slide-0

所以,last包含

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

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

问题lastaddpic. 即使添加了照片,它也永远不会转到最后一张照片。如果我把

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

lastaddpic还是不行。它总是排到倒数第二张照片(如果我有 3 张照片,它总是排到第三张,在添加第四张之后)

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

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

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

请指教。谢谢

4

2 回答 2

2

在 addpic() 方法中的数组中添加图片后,它们需要一些时间来反映在 html 中作为模板,所以在超时时调用最后一个方法,如

addpic(){
    this.images.push({'link':'https://picsum.photos/900/500/?image=7','name':'added one'});     
    setTimeout(() => {
        this.last();
    });
  }
于 2018-09-09T23:02:41.240 回答
1

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

但我认为你也可以ChangeDetectorRef.detectChanges()在这种情况下使用,感觉不那么“hacky”。(此处的文档和相关问答:markForCheck() 和 detectChanges() 之间有什么区别

last在您打电话之前使用它。

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

于 2018-09-09T23:20:33.440 回答