ngFor not updating in IE 11 (RC4 with CoreJS)

ngFor not updating in IE 11 (RC4 with CoreJS)

本文关键字：RC4 with CoreJS not updating in IE ngFor      更新时间：2023-09-26

首先，我在问题部分查看了关于angular和stackoverflow上IE的所有现有问题，以及angular本身的git-reo。找不到任何对我有帮助的东西，所以这绝对不是重复的（IE和ng2在垫片方面有很多问题，应该使用CoreJS解决）。

我在IE 11中的Angular（RC4）（可能还有更低的版本）使用*ngFor时遇到了问题。

我有一个List组件，它包含一个listData数组（通过@Input()提供的对象数组）。

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

在我的主视图中，我使用这个带有指令的列表组件，并从这个主组件控制它。

我尽量简化组件/指令：

scroll指令在这一点上没有太大作用，它有一个本机事件侦听器连接到window.scroll事件，检查父组件维度，并从main component调用通过@Input提供的后端方法，并在加载完成后用加载的数据发出和事件。

正如我已经提到的，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>

在我的列表视图模板中，我使用*ngFor来显示listData。事实上，我使用ngFor和template，但这对我的问题没有影响。

它在大多数浏览器（chrome、firefox、safari、edge、vivaldi…）中运行良好，但在IE11中则不然。我根本没有收到任何错误消息，列表确实正确初始化。如果我向下滚动onLazyLoadComplete函数被正确触发，数组被正确填充时，listView会正确更新，但更改不会反映在我的视图中。什么也没发生。

现在转到BUT：正如您在我上面提供的代码中所看到的，我尝试用zone.run( () => { })包装我的onLazyLoadComplete函数中的for loop，这实际上是有效的。问题是，我不知道为什么这会有所不同，实际上我也不知道这样做是否有负面影响。（我认为这实际上会降低性能）但至少在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的全部内容。。。

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

使用

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

而不是

window.addEventListener
相关文章：