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 /组件/ flickity / flickity.directive.ts

在类中的任何位置添加remove方法，如下所示：

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

的src /组件/ flickity - 子/ 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);
  }
}

注意：仅显示更改的行

Angular Flickity更改元素

1 个答案: