angular - 如何重新渲染 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需要“重新加载”组件时的方法。通过设置 show值为 false 并等待 1 个事件循环完成( setTimeout )，您会破坏内部模板。通过设置 show在此之后将值设置为 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 分配新值(扩展运算符)，您对 Angular 说模板中与 data 绑定(bind)的部分应该重建。