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

Question

概览：

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

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

问题：

因为我的 ngFor 绑定到第一个数组，当第二个数组中的数据发生变化时，没有任何更新，所以此刻我不得不回忆起我的 http 方法，它获取完全相同的数据只是为了更新列表。

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

StackBlitz:

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

Answer 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;">

Answer 2

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

Answer 3

您可以在此数组上设置新引用，它将重新呈现，

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

Answer 4

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

解决方案

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

Stackblitz

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

How can i re-render ngFor when data doesn't change?