Angular 6 обновить массив и ngFor в шаблоне - PullRequest
Новая
       30

Angular 6 обновить массив и ngFor в шаблоне

0 голосов
/ 10 сентября 2018

Я использую 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>

Массив images, содержащий JSON, - это 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, чтобы перейти к слайду по его идентификатору, а идентификатор - это образец 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 фото, оно всегда идет к третьему, после добавления 4-го)

Но это будет работать , если я нажму последнюю кнопку или использую стрелки в интерфейсе карусели.

Это заставляет меня думать, что каким-то образом HTML или массив не "обновляются", когда в машинописном коде вызывается last, но каким-то образом кнопки обновляют / создают HTML, необходимый для показа нужной фотографии?

Я не знаю, что это такое, но я почти уверен, что теперь это связано с обновлением html / typcript. Я думаю, что это угловая проблема, а не проблема ngbCarousel. Я не знаю, как отладить или продолжить.

Пожалуйста, совет. Спасибо

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Вы можете использовать setTimeout для принудительного выполнения метода last после того, как Angular обнаружит изменения, как в ответе Пареша Гамиса.

Но я думаю, что вы также можете использовать ChangeDetectorRef.detectChanges() в этой ситуации, он кажется менее "хакерским" ( Документация и соответствующие вопросы и ответы здесь: В чем разница между markForCheck () и deteChanges () )

используйте его как раз перед вашим last вызовом.

Я не уверен, сработает ли это в вашем случае (если вы предоставите минимальный пример StackBlitz, мы могли бы поработать над деталями)

0 голосов
/ 10 сентября 2018

После добавления рисунка в массив в методе addpic () им требуется битовое время для отражения в html как шаблон, поэтому вызовите последний метод в тайм-ауте, как 

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