如何在Angular 4中访问JSON对象数组并在HTML中展示数据

我来帮你搞定Angular 4模板里访问JSON对象数据的问题～先假设你的entity对象结构大概是这样的（你可以根据实际业务调整）：

{
  "name": "Test Entity",
  "aaType": "Type A",
  "adjust": {
    "value": 100,
    "reason": "Initial setup"
  },
  "adjustHistory": [
    { "date": "2024-01-01", "value": 90 },
    { "date": "2024-02-01", "value": 100 }
  ]
}

下面结合你已有的代码，分场景给出完整的模板写法：

1. 访问直接属性（比如aaType） #

和你写的name字段类似，直接通过插值或属性绑定访问即可，这里给你补全aaType的输入框代码：

<div class="flexdirectioncolumn">
  <div class="flex50">
    <label class="label-prop-a"> Name </label>
    <div>
      <input #name type="text" value={{entity.name}} (keyup.enter)="changeName(name.value)" />
    </div>
  </div>
  <div class="flex50">
    <label> AaType </label>
    <div>
      <!-- 插值写法，和name保持一致 -->
      <input #aaType type="text" value="{{entity.aaType}}" (keyup.enter)="changeAaType(aaType.value)" />
      <!-- 更推荐的属性绑定写法 -->
      <!-- <input #aaType type="text" [value]="entity.aaType" (keyup.enter)="changeAaType(aaType.value)" /> -->
      <!-- 如果需要双向同步数据，先在模块导入FormsModule，再用[(ngModel)] -->
      <!-- <input type="text" [(ngModel)]="entity.aaType" (keyup.enter)="changeAaType(entity.aaType)" /> -->
    </div>
  </div>
</div>

2. 访问嵌套对象属性（比如adjust下的字段） #

如果adjust是嵌套对象，用链式访问即可，记得加上安全导航操作符?.，避免entity或adjust为null/undefined时触发报错：

<!-- 新增的adjust字段访问区域 -->
<div class="flexdirectioncolumn mt-20">
  <div class="flex50">
    <label class="label-prop-a"> Adjust Value </label>
    <div>
      <input type="text" [value]="entity?.adjust?.value" (keyup.enter)="changeAdjustValue($event.target.value)" />
    </div>
  </div>
  <div class="flex50">
    <label> Adjust Reason </label>
    <div>
      <input type="text" [value]="entity?.adjust?.reason" (keyup.enter)="changeAdjustReason($event.target.value)" />
    </div>
  </div>
</div>

3. 遍历数组（比如adjustHistory） #

用Angular的*ngFor指令遍历数组，同时建议加上trackBy优化渲染性能：

<!-- 数组遍历展示区域 -->
<div class="history-section mt-30">
  <h3> Adjust History </h3>
  <ul class="history-list">
    <li *ngFor="let record of entity?.adjustHistory; trackBy: trackByDate">
      <span>Date: {{record.date}}</span>
      <span> | Value: {{record.value}}</span>
      <button class="delete-btn" (click)="deleteHistory(record)">Delete</button>
    </li>
  </ul>
</div>

组件类对应方法（必填） #

模板里用到的事件方法，需要在你的Angular组件类中定义：

// 组件.ts文件中的示例方法
changeName(newName: string): void {
  this.entity.name = newName;
  // 这里可以添加保存到后端的逻辑
}

changeAaType(newType: string): void {
  this.entity.aaType = newType;
}

changeAdjustValue(newValue: string): void {
  if (this.entity.adjust) {
    this.entity.adjust.value = Number(newValue);
  }
}

changeAdjustReason(newReason: string): void {
  if (this.entity.adjust) {
    this.entity.adjust.reason = newReason;
  }
}

// 用于*ngFor的trackBy优化
trackByDate(index: number, record: any): string {
  return record.date; // 用数组元素的唯一标识作为追踪键
}

deleteHistory(record: any): void {
  this.entity.adjustHistory = this.entity.adjustHistory.filter(item => item.date !== record.date);
}

注意事项 #

• 安全导航符?.：Angular 4已经支持这个语法，能有效避免空值引用报错，一定要记得加！
• 双向绑定[(ngModel)]：如果要用这个语法，必须在你的模块中导入FormsModule（来自@angular/forms）
• trackBy优化：当数组数据更新时，trackBy能让Angular只更新变化的元素，而不是重绘整个列表，提升性能

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