我使用 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 导航到幻灯片,并且 id 是 pattern 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 张照片,它总是排到第三张,在添加第四张之后)
但是,如果我点击最后一个按钮或使用轮播 UI 中的箭头,这将起作用。
这让我认为,last
在打字稿中调用时,HTML 或数组不会以某种方式“刷新”,但按钮会以某种方式刷新/创建显示正确照片所需的 HTML?
我不知道它是什么,但我现在几乎可以肯定它与刷新 html/typescript 有关。我认为这是一个角度问题,而不是 ngbCarousel 问题。我不知道如何调试或继续。
请指教。谢谢