我怎样才能重新渲染 ngFor

Question

我只想知道如何重新渲染 ngFor 或刷新组件（hello.component.ts）。代替文本可以是图像或图表。

这是一个简单的例子：Stackblitz

解决方案：

 public show = true;
 addData(data){
      this.data.push(data);
      this.reload();
    }
  reload() {
    this.show = false;
    setTimeout(() => this.show = true);
  }

Answer 1

不确定我是否理解您的需求，但您可以尝试简单的 ngIf 和零超时方法来重新渲染组件的模板：

@Component({
  selector: 'hello',
  template: `<div *ngIf="show">
... your template
</div>`
})
export class HelloComponent  {

  public show = true;

  // ... your code

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

}

reload当您需要“重新加载”组件时调用该方法。通过将showvalue设置为 false 并等待 1 个事件循环完成 ( setTimeout)，您会破坏内部模板。通过show在此之后将value设置为 true，您可以再次渲染内部模板。

更新。您也可以通过手动更改数据来强制 Angular 重新渲染组件模板中特定于数据的部分：

@Component({
  selector: 'hello',
  template: `...
<div *ngFor="let i of data">
  {{i}}...
</div>`
})
export class HelloComponent  {

  public data = [];

  // ... your code

  reloadData() {
    this.data = [...this.data];
  }

}

这将允许您仅“重新加载”数据数组，因此NgFor将自动处理它的内部模板重新渲染。通过为this.data(spread operator)分配新值，您对 Angular 说data应该重新构建模板中绑定的部分。