html - Angular Flickity更改元素

我有一个flicky，它添加了额外的元素，如下所示：
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;
}

当第一次加载时，它会按需要出现，但是当第二次调用“cc>”时，它没有正确显示/更新。下面是正在发生的事情的屏幕截图：

flicky中应该只有10个对象（由日志记录显示），但是它包含20个项指示符，前10个项不起作用/无效。当我导航到项目11-20时，它显示正确。
我还尝试更新原来的10个项目如下：

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

然而，同样的情况也发生了。
我正在使用：

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

编辑：例如，请参阅（很抱歉，它看起来不太好看，但您可以通过单击“重新加载正在添加的更多项目”来查看）：
https://stackblitz.com/edit/angular-8eemsv

最佳答案

我找到了一个解决方案，需要修改ngx flicky（https://github.com/geex-arts/ngx-flickity）的代码。我已经制作了git存储库的本地副本，在其中编辑了以下文件：
src/components/flicky/flicky.directive.ts命令
在类中的任意位置添加remove方法，如下所示：

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

src/components/flicky child/flicky-child.directive.ts
按如下步骤执行文件：

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

注意：仅显示更改的行

关于html - Angular Flickity更改元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49695230/