Angular 4中*ngFor内ngModel不更新问题求助

嘿，我之前也碰到过一模一样的问题！在Angular 4里点击添加按钮生成输入框后，输入框自身能正常更新，但组件里的插值表达式没动静，这多半是Angular的变更检测机制没识别到数据变化导致的，给你几个靠谱的解决办法：

1. 让数组变更被Angular“看得到” #

Angular默认的变更检测对数组的引用变化更敏感。如果你只是用push添加元素，有时候在某些场景下（比如组件用了OnPush策略）可能不会触发检测。这时候可以通过创建新数组的方式来触发引用更新：

组件代码示例：

export class YourComponent {
  inputItems: any[] = [];

  addNewInput() {
    // 用扩展运算符生成新数组，让Angular检测到引用变化
    this.inputItems = [...this.inputItems, { value: '' }];
  }
}

2. 手动触发变更检测（针对OnPush策略） #

如果你的组件设置了ChangeDetectionStrategy.OnPush，Angular只会在输入属性变化或组件内事件触发时才检查变更。这种情况下，你需要手动注入ChangeDetectorRef来触发检测：

组件代码示例：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 你用了这个策略的话
})
export class YourComponent {
  inputItems: any[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  addNewInput() {
    this.inputItems.push({ value: '' });
    // 手动通知Angular更新视图
    this.cdr.detectChanges();
  }
}

3. 给*ngFor加trackBy函数 #

在*ngFor里添加trackBy不仅能优化性能，避免不必要的DOM重绘，还能解决部分值不同步的问题，因为它能帮Angular准确识别每个列表项：

视图代码示例：

<button (click)="addNewInput()">添加输入框</button>
<div *ngFor="let item of inputItems; let i = index; trackBy: trackByItem">
  <input [(ngModel)]="item.value" placeholder="请输入内容">
  <p>当前输入值：{{ item.value }}</p>
</div>

组件里添加trackBy函数：

trackByItem(index: number, item: any): number {
  return index; // 如果你的项有唯一ID，用item.id会更靠谱
}

4. 用类实例代替普通对象 #

如果之前是直接push普通对象{ value: '' }，可以试试创建一个明确的类来生成实例，这样Angular能更好地追踪属性变化：

// 先定义一个类
export class InputItem {
  value: string = '';
}

// 组件里使用
addNewInput() {
  this.inputItems.push(new InputItem());
}

你可以先从检查数组的更新方式入手，看看是不是没触发引用变化；如果用了OnPush策略，记得手动触发变更检测，一般就能解决问题啦！

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