javascript - ngFor 未在 IE 11 中更新(带有 CoreJS 的 RC4)

Question

首先，我查看了 stackoverflow 上有关 Angular 和 IE 的所有现有问题，以及问题部分中 Angular 本身的 git 存储库。找不到任何对我有帮助的东西，所以这绝对不是重复的(IE 和 ng2 关于垫片有很多问题，应该使用 CoreJS 来解决)。

我在 IE 11(也可能是较低版本)中使用 *ngFor 时遇到 Angular (RC4) 问题.

我有一个列表组件，其中包含 listData 的数组(通过 @Input() 提供的对象数组)。

此外，我有一个指令(类似于惰性加载程序)，它观察滚动位置并在到达特定点时调用后端方法(想想无限滚动指令)。

在我的主视图中，我使用带有附加指令的列表组件，并通过该主组件控制它。

我尝试尽可能简化组件/指令:

此时滚动指令没有做太多事情，它有一个附加到 window.scroll 的 native 事件监听器。事件，检查父组件尺寸并调用通过 @Input 提供的后端方法来自main component并在加载完成后发出带有加载数据的事件。

正如我已经提到的，ListView 组件保存对整个数据的引用(由主组件初始化)。

我的主要组件:

export class MyMainComponent {
    @ViewChild(ListViewComponent) listView: ListViewComponent;

    listData: any[];

    constructor(private _zone: NgZone) {
        this.getBackendDataMocked().subscribe((arr) => {
            this.listData = arr;
        });
    }

    onLazyLoadComplete(loadedData: any[]) {
        // this._zone.run(() => { // todo: ie11 and below fix.
            for (let item of loadedData) {
                this.listData.push(item);
            }
        // });
        this.listView.refresh();
    }
}

模板初始化 listView 和指令，如下所示:

<list-view *ngIf="listData"
     lazy-loader
     [doLazyLoad]="getBackendDataMocked()"
     (onLazyLoadStart)="onLazyLoadStart($event)"
     (onLazyLoadComplete)="onLazyLoadComplete($event)"
     [listData]="listData">
</list-view>

在我的 listView 模板中，我使用 *ngFor 来显示 listData 。实际上，我使用ngFor与 template但这对我的问题没有影响。

它在大多数浏览器(chrome、firefox、safari、edge、vivaldi...)中都可以正常工作，但在 IE11 中则不行。我根本没有收到任何错误消息，该列表确实正确初始化。如果我向下滚动 onLazyLoadComplete 函数正确触发，数组正确填充，listView 正确更新，但更改未反射(reflect)在我的 View 中。什么也没发生。

现在到但是:正如您在我提供的代码中看到的那样，我尝试包装 for loop在我的onLazyLoadComplete函数 zone.run( () => { })这确实有效。问题是，我不知道为什么这会产生影响，而且我实际上不知道这样做是否有缺点。 (我认为它实际上会降低性能)但至少它可以在 IE11 中运行。

即使是这样的事情对我来说也能解决问题:

onLazyLoadComplete(loadedData: any[]) {
    for (let item of loadedData) {
         this.listData.push(item);
    }
    this._zone.run(() => { // todo: ie11 and below fix.
         this.listData = this.listData;
    });
    this.listView.refresh();
}

但是，我不可能那样做。

我的index.html(关于垫片、导入顺序等)如下所示:

<script src="src/vendor/node_modules/shim.min.js"></script> // core js
<script src="src/vendor/node_modules/system.src.js"></script> 
<script src="src/vendor/node_modules/Reflect.js"></script>
<script src="src/vendor/node_modules/zone.js"></script>

更改脚本标签的顺序，添加 es6-shim ，添加shims-for-ie.js (某处也提到过)。没有任何区别(显然确实如此，但对于这个问题来说不是)。

最后一件事:自从 zone.run东西确实有效，我认为这与我使用 zone.runOutsideAngular() 在我的 listView 中添加的事件监听器有关。但事实并非如此。如果我删除 runOutsideAngular通话性能会下降，但这并不能解决我的问题。我不得不说，我还没有弄清楚全部zone.js东西还没...

任何帮助将不胜感激。如果我应该提供更多代码，请在评论中询问，我会这样做，但我认为这应该足够了。

Answer 1

使用

@HostListener('window:scroll'/*, ['$event']*/)
eventHandler(/*event) {
  ...
}

而不是

window.addEventListener