Angular 4：*ngFor展示时如何更新数据且保留原有数据？

当然可以轻松实现这个需求！咱们可以在展示Method集合数据的同时，安全地给缺失method字段的对象补上默认值，而且完全不会改动已经存在的原有数据。下面给你两种适配Angular 4场景的实用方案：

方案一：模板内直接处理（适合简单场景） #

如果只是在当前模板里需要处理，咱们可以利用Angular的模板语法，在渲染时判断字段是否存在，补全的同时展示数据：

<div *ngFor="let pMethods of Method">
  <!-- 展示核心数据 -->
  <span>{{ pMethods.name }} - {{ pMethods.value }}</span>
  <!-- 判断并补全method字段 -->
  <span> - {{ pMethods.method || (pMethods.method = 'M') }}</span>
</div>

这段代码的逻辑是：如果pMethods已经有method字段，直接展示；如果没有，就给它赋值默认值'M'，同时展示这个值。已有的method字段完全不会被改动，只会补全缺失的部分。

方案二：组件逻辑预处理（适合复杂/复用场景） #

如果需要在多个地方复用这个处理逻辑，或者不想在模板里写太多业务代码，咱们可以在组件的初始化或数据加载完成后，提前处理Method数组：

// 组件.ts文件中的代码
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-method-list',
  templateUrl: './method-list.component.html'
})
export class MethodListComponent implements OnInit {
  Method = [
    {"name" : "ABC","value" : "45","method" : "M"},
    {"name" : "DEF","value" : "44","method" : "y"},
    {"name" : "XYZ","value" : "42"}
  ];

  ngOnInit(): void {
    // 遍历数组，补全缺失的method字段
    this.Method.forEach(pMethod => {
      // 仅当method字段不存在或为空时才赋值
      if (!pMethod.hasOwnProperty('method') || !pMethod.method) {
        pMethod.method = 'M'; // 这里可以替换成你需要的默认值
      }
    });
  }
}

之后模板里就可以直接正常展示所有字段了：

<div *ngFor="let pMethods of Method">
  {{ pMethods.name }} - {{ pMethods.value }} - {{ pMethods.method }}
</div>

额外提示：不修改原对象的处理方式 #

如果你的业务要求不能修改原对象（比如原数据是从后端获取的不可变数据），可以用扩展运算符生成新对象，避免改动原数据：

this.Method = this.Method.map(pMethod => {
  if (!pMethod.hasOwnProperty('method') || !pMethod.method) {
    // 生成新对象，保留原有属性并添加method字段
    return { ...pMethod, method: 'M' };
  }
  // 已有字段的对象直接返回原对象
  return pMethod;
});

这种方式会创建一个新的数组，原对象完全不受影响，同时补全了缺失的字段。

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