如何使用Angular的*ngFor指令，仅初始渲染且禁用双向数据绑定？

嘿，这个需求其实挺常见的——要让*ngFor只渲染初始数据，之后不管模型还是视图的变化都互不影响。下面给你几个实用的解决方案：

方案1：使用数组副本切断绑定关系 #

最简单的办法就是给*ngFor提供一个初始数组的副本，这样Angular的变更检测就不会追踪原数组的后续变化了。你可以通过两种方式实现：

方式A：在模板中直接创建副本 #

修改你的模板，用slice()方法生成原数组的副本：

<p *ngFor="let character of characters.slice()">{{ character }}</p>

slice()会返回一个新数组，初始渲染完成后，哪怕你给原characters数组添加/删除元素，这个副本都不会跟着变，视图自然也不会更新。

方式B：在组件初始化时创建副本 #

也可以在组件里直接初始化一个不可变的副本：

@Component({
  template: '<p *ngFor="let character of characters">{{ character }}</p>',
})
export class TestComponent {
  // 用展开语法或者slice()创建初始副本
  public characters = [...['a', 'b', 'c']];
  // 或者 public characters = ['a', 'b', 'c'].slice();
}

这样后续修改原数组（比如调用this.characters.push('d')）时，视图不会同步更新，因为渲染用的是初始的副本。

方案2：使用OnPush变更检测策略 #

如果你希望整个组件都采用更严格的变更检测规则，可以用ChangeDetectionStrategy.OnPush，这样只有在特定条件下才会更新视图：

首先导入相关依赖，然后修改组件装饰器：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  template: '<p *ngFor="let character of characters">{{ character }}</p>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestComponent {
  public characters = ['a', 'b', 'c'];

  addNewCharacter() {
    this.characters.push('d');
    // 注意：这里不要调用ChangeDetectorRef的detectChanges()方法
    // 视图就不会因为数组变化而更新
  }
}

OnPush策略下，Angular只会在以下情况更新视图：

• 组件的@Input属性发生引用变化
• 组件内部触发了事件（比如点击、输入）
• 手动调用ChangeDetectorRef.detectChanges()

所以只要你不主动触发变更检测，修改数组后视图就不会同步更新。不过这个方案是组件级的，如果你组件里还有其他需要自动更新的内容，可能需要谨慎使用。

总结 #

如果只是单纯想让*ngFor不追踪原数组的变化，方案1是最简便且低侵入性的选择；如果你的组件本身就适合采用OnPush策略，方案2也是不错的选择。

内容的提问来源于stack exchange，提问作者Danyg