当数据没有改变时，我如何重新渲染 ngFor？答案

【问题标题】：How can i re-render ngFor when data doesn't change?当数据没有改变时，我如何重新渲染 ngFor？
【发布时间】：2019-04-25 09:50:58
【问题描述】：

概述：

我有一个使用管道将两个数组与一个 ngfor 绑定在一起的列表。我将数组绑定在 typeID 上。

一个数组列出了所有可用的类型，另一个包含选定的类型以及一个额外的选项。注意数组只共享 2 个属性，name 和 id

问题：

因为当第二个数组中的数据更改时，我的 ngFor 绑定到第一个数组，所以没有更新任何内容，所以此刻我必须调用我的 http 方法，该方法抓取完全相同的数据只是为了更新列表。

我需要一种方法来强制重新渲染，而无需每次第二个数组中的某些内容发生更改时调用我的 api

StackBlitz：

https://stackblitz.com/edit/angular-nxkwaf

【问题讨论】：

你能告诉我这里有什么问题吗？ stackblitz.com/edit/angular-hpr2e6?file=src/app/…我评论了this.getPrimary()来电
如果您首先选中“isChecked”复选框，那么它应该选中两个复选框并添加到数组中。一旦将其添加到数组中，就可以多次选中/取消选中“isChecked”所有功能都可以正常工作，我只需要一种更好的方法来重新呈现列表

【解决方案1】：

您可以使用 ngIf 和 setTimeout 来使 ngFor 重新渲染。调用this.reload() 而不是this.getPrimary()

reload() {
  this.show = false;
  setTimeout(() => this.show = true);
}

将 ngFor 包裹在 ngIf

中

<ul class="list list-a" *ngIf="show">
   <li *ngFor="let p of primary;">

【讨论】：

这有点像 hack，可能比我目前的 hack 性能更好，但如果有一个实际的解决方案，我不介意，不过谢谢
尝试使用 *ngIf="show" 隐藏和显示 ag-grid-angular 组件，以使用 setTimeout 删除之前的 ag-grid 实例，例如 this.show = false; setTimeout(() => this.show = true)
这与您在上面给出的答案几乎相同。这个问题是我不需要显示/隐藏列表，除了强制/破解它来工作。使用 onik 解决方案的调整版本，我可以设置实际用于更新模板的对象，在我看来这是一种更好的方法

【解决方案2】：

使用 onik 解决方案的调整版本，我设法用更少的代码行解决了这个问题

解决方案

this.secondary = this.secondary.concat({ primaryID: primary.primaryID, name: primary.name, isChecked: false });

堆栈闪电战

https://stackblitz.com/edit/angular-rydedr

【讨论】：

【解决方案3】：

您可以从角核心导入ChangeDetectorRef 并触发markForCheck。这可能不是最佳方式，但它应该根据您的情况重新渲染组件

【讨论】：

【解决方案4】：

你可以在这个数组上设置新的引用，它会重新渲染，

this.secondary = [...this.secondary];

【讨论】：

您能否详细说明您的意思，或许可以编辑 stackblitz？
如果任何参数发生变化，管道将重新运行，因此重新分配 secondary 会将管道 isInArray 作为 secondary 重新运行是管道的参数。