html - Angular Flickity elemanları değiştirme

Bir Flickity'im var ve buna şu şekilde ekstra öğeler eklendi:

HTML

<div [flickity]="{wrapAround: true}" *ngIf="!isError">
  <div [flickityChild] *ngFor="let item of items" class="slide">
    {{ item.viewValue }}
  </div>
</div>

TS

public items: any[] = [];

public ngOnInit() {
  this.loadItems();
}

public loadItems() {
  this.api.loadItems()
    .then(x => this.onItemsLoad(x));
}

private onItemsLoad(items) {
  console.log(items.length);
  this.items = items;
}

İlk yüklendiğinde istediğiniz gibi görünüyor, ancak loadItems() ikinci kez çağrıldığında doğru şekilde görüntülenmiyor/güncellenmiyor. Aşağıda olan bitenin bir ekran görüntüsü bulunmaktadır:

Flickity'de (kaydedilen loglarda gösterildiği gibi) sadece 10 nesne olmalı, ancak 20 öğe göstergesi içeriyor ve ilk 10 öğe çalışmıyor/geçersiz. 11-20 öğelerine gittiğimde doğru şekilde görüntüleniyor.

Aşağıdaki şekilde orijinal 10 öğeyi güncellemeyi de denedim:

public items: any[] = [];

public ngOnInit() {
  this.items.length = 10;
  this.loadItems();
}
..

private onItemsLoad(items) {
  for (let i = 0; i < items.length; ++i) {
    this.items[i] = items[i];
  }
}

Ancak aynı şey oluyor.

Şunu kullanıyorum:

@angular/cli: 1.2.7
node: 6.10.3
os: win32 x64
flickity: 2.1.0
ngx-flickity: 0.0.9

Düzenle: Örneğin şuna bakın (üzgünüm, güzel görünmüyor ama yeniden yükleye tıkladığınızda daha fazla öğe eklendiğini görebilirsiniz): https://stackblitz.com/edit/angular-8eemsv

Cevap #1

Ngx-flickity (https://github.com/geex-arts/ngx-flickity) için kodu değiştirmeyi gerektiren bir çözüm buldum. Düzenlediğim aşağıdaki dosyalarla git deposunun yerel bir kopyasını yaptım:

src/bileşenler/flickity/flickity.directive.ts

Sınıfın herhangi bir yerine aşağıdaki gibi bir kaldırma metodu ekleyin:

remove(el: HTMLElement) {
  this.flkty.remove(el);
}

src/bileşenler/flickity-çocuk/flickity-çocuk.directive.ts

Dosyanın OnDestroy'u şu şekilde uygulamasını sağlayın:

import {
  Directive, Optional, Host, ElementRef, OnInit, Input, OnDestroy
} from '@angular/core';

...

export class  FlickityChildDirective implements OnInit, OnDestroy {

...

  ngOnDestroy(): void {
    if (!this.parent) {
      return;
    }

    this.parent.remove(this.el.nativeElement);
  }
}

Not: sadece değiştirilen satırlar gösterilmektedir