html - Angular Flickity 改变元素

Question

我有一个 flickity，其中添加了额外的元素，如下所示:

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

当它第一次加载时，它会按预期显示，但是当第二次调用 loadItems() 时，它不会正确显示/更新。下面是正在发生的事情的屏幕截图:

flickity 中应该只有 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

Answer 1

我找到了一个需要修改 ngx-flickity ( https://github.com/geex-arts/ngx-flickity) 代码的解决方案。我制作了 git 存储库的本地副本，我在其中编辑了以下文件:

src/components/flickity/flickity.directive.ts

在类的任意位置添加remove方法如下:

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

src/components/flickity-child/flickity-child.directive.ts

使文件实现OnDestroy如下:

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

注意:只显示更改的行