Angular中NgFor渲染的input值变化时如何修改其背景色

核心思路是给每个列表项存储初始值，通过双向绑定实时对比当前值和初始值，动态给输入框绑定修改状态的样式类，不需要手动操作DOM。

第一步：存储列表项初始值 #

在组件TS代码中，初始化List数据时，给每一项额外存一份初始的value作为对比基准：

// 组件类中，在List初始化完成后执行（比如接口订阅回调、ngOnInit钩子中）
this.List = this.List.map(item => {
  return {
    ...item,
    originalValue: item.value // 存储初始值，用于判断内容是否被修改
  }
})

第二步：修改模板，绑定动态类并修正原有语法问题 #

原模板里的onfocus存在多余引号的语法错误，换成Angular标准的事件绑定写法，同时给输入框动态绑定修改状态的类：

<ng-container *ngFor="let obj of List">
  <mat-form-field 
    ngDefaultControl 
    class="form-field" 
    appearance="outline"
    [class.is-modified]="obj.value !== obj.originalValue"
  >
    <!-- 若仅需要修改input元素本身的背景，可把动态类移到input标签上，移除mat-form-field上的类绑定即可 -->
    <input
      matInput
      type="number"
      placeholder="0"
      [(ngModel)]="obj.value"
      (focus)="$event.target.select()"
    />
  </mat-form-field>
</ng-container>

第三步：编写对应样式 #

因为Angular Material组件有样式封装，需要用::ng-deep做样式穿透才能让自定义样式生效，在组件的样式文件中添加：

/* 修改整个mat-form-field输入区域的背景 */
::ng-deep .form-field.is-modified .mat-mdc-form-field-infix {
  background-color: #fff3e0; /* 替换为你需要的背景色，比如浅橙色提示内容已修改 */
  border-radius: 4px;
}

/* 如果只需要改input输入框本身的背景，用这个选择器即可
::ng-deep .form-field.is-modified input {
  background-color: #fff3e0;
  padding: 0 8px;
}
*/

补充说明 #

• 如果需要在用户保存数据后重置修改状态，只需要在保存成功的回调里遍历List，把每一项的originalValue更新为当前的value，样式会自动恢复为默认状态。
• 如果value可能存在null/undefined的空值情况，对比时可以做空值兼容，避免类型不一致导致判断失效：

  [class.is-modified]="String(obj.value ?? '') !== String(obj.originalValue ?? '')"
  

内容的提问来源于stack exchange，提问作者Imreh Csaba Albert