时间戳

首页 > 解决方案 > 为什么在 ngFor 循环中应用 ngModel 时出现内存泄漏？

javascript - 为什么在 ngFor 循环中应用 ngModel 时出现内存泄漏？

问题描述

所以在我的 Angular 5 应用程序中，我有以下代码：

<div *ngFor='let part of (post.student | async).get("qcm")'>
       <mat-checkbox>this can't be checked in or checked out</mat-checkbox>
</div>

post.student是 PromiseObservable 类型。

post.student | async属于 DocumentSnapshot 类型（Firestore 文档）。

(post.student | async).get("qcm")是三个对象的数组。

我的问题是：

1）复选框不起作用（无法签入或签出）

2）如果我尝试在复选框上应用 ngModel 指令，如下所示：

<div *ngFor='let part of (post.student | async).get("qcm")'>
       <mat-checkbox [(ngModel)]='myBool'>this can't be checked in or checked out</mat-checkbox>
</div>

然后整个站点阻塞，使用任务管理器我可以看到我的站点现在有内存泄漏：

任务管理器

请注意，如果我使用另一个对象数组，而不是(post.student | async).get("qcm")一切正常。

控制台中也没有错误。

我不知道发生了什么，感谢任何帮助，谢谢！

标签： javascriptangularfirebase

解决方案

由于我无法添加评论，因此我只是尝试在此处发布一些可能对您有所帮助的信息作为答案。

我不认为你可以像那样添加 ngModel 。您必须将其绑定到一个对象，例如[(ngModel)]="myDataModel". 请注意，[] and ()那里有两种方式绑定，这意味着您的 myDataModel 对象中的任何内容都将随时反映在复选框中。（所以基本上 - 所以如果你改变模型，cehckbox 会改变，如果你改变 checkox，模型就会改变）。您不必总是添加两种方式绑定，请查看角度站点以获取有关此的更多信息。

此外，复选框可能是 js 事物，请检查您的浏览器控制台是否有错误。我假设发生了一些错误，它中断了 js 代码的运行。

我希望它有助于找到您的问题。

推荐阅读