Angular中用*ngFor和[(ngModel)]修改含Map的对象数组问题

一、问题背景 #

定义了如下TypeScript类：

export class MyObject {
  sections: Section[]
}
export class Section {
  dataPoints: Map<string, string>
}

需要在前端展示MyObject实例并支持用户修改，包括修改dataPoints内容、增删Sections数组元素、增删dataPoints中的元素，但现有HTML模板存在问题：

<ul>
  <li *ngFor="let section of this.myObject; index as sectionsIndex">
    <ul>
      <li *ngFor="let dataPoint of section.dataPoints | keyvalue">
        <mat-form-field appearance="fill">
          <mat-label>Label:</mat-label>
          <input matInput placeholder="Label input field placeholder"
              [(ngModel)]="this.myObject.sections[sectionsIndex].dataPoints[dataPoint.key]">
        </mat-form-field>

        <mat-form-field appearance="fill">
          <mat-label>Content:</mat-label>
          <input matInput placeholder="Content input field placeholder"
              [(ngModel)]="this.myObject.sections[sectionsIndex].dataPoints[dataPoint.value]">
        </mat-form-field>
      </li>
    </ul>
  </li>
</ul>

遇到两类错误：

• 不使用keyvalue管道时，控制台报错：

  Error: NG02200: Cannot find a differ supporting object '[object Map]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe?

• 使用keyvalue管道后，编译报错：

  Element implicitly has an 'any' type because type 'Map<string, string>' has no index signature. Did you mean to call 'get'?
  以及类似的Did you mean to call 'set'?错误

二、错误原因分析 #

1. NgFor遍历Map的错误：Angular的*ngFor仅支持绑定数组、Set这类可迭代对象，Map本身不属于数组类型，直接遍历会触发NG02200错误，必须通过keyvalue管道将Map转换为键值对数组才能遍历。
2. ngModel绑定Map的错误：TypeScript中Map<string, string>的读写必须通过get(key)和set(key, value)方法实现，不能像普通对象那样用map[key]的索引方式访问。[(ngModel)]的双向绑定本质是读取和赋值操作，直接用dataPoints[dataPoint.key]的写法不符合Map的类型规范，因此触发类型检查错误。

三、最佳实践 #

针对Angular中含Map的对象数组修改需求，推荐两种解决方案，优先选择第一种：

方案1：将Map转换为数组格式（推荐） #

把dataPoints: Map<string, string>转换成dataPoints: {key: string, value: string}[]的数组格式，Angular对数组的遍历、双向绑定支持更友好，增删操作也更直观。

修改后的类定义

export class MyObject {
  sections: Section[] = [];
}
export class Section {
  dataPoints: {key: string, value: string}[] = [];
}

组件模板（支持修改、增删）

<ul>
  <!-- 遍历Sections数组 -->
  <li *ngFor="let section of myObject.sections; index as sectionIdx">
    <!-- Section增删按钮 -->
    <button (click)="addDataPoint(sectionIdx)">添加数据项</button>
    <button (click)="removeSection(sectionIdx)" *ngIf="myObject.sections.length > 1">删除Section</button>

    <!-- 遍历dataPoints数组 -->
    <ul>
      <li *ngFor="let item of section.dataPoints; index as itemIdx">
        <mat-form-field appearance="fill">
          <mat-label>Label:</mat-label>
          <input matInput [(ngModel)]="item.key">
        </mat-form-field>

        <mat-form-field appearance="fill">
          <mat-label>Content:</mat-label>
          <input matInput [(ngModel)]="item.value">
        </mat-form-field>

        <button (click)="removeDataPoint(sectionIdx, itemIdx)" *ngIf="section.dataPoints.length > 1">删除数据项</button>
      </li>
    </ul>
  </li>
</ul>
<button (click)="addSection()">添加Section</button>

组件类中的增删方法

// 添加新的Section
addSection(): void {
  this.myObject.sections.push({ dataPoints: [] });
}

// 删除指定Section
removeSection(index: number): void {
  this.myObject.sections.splice(index, 1);
}

// 给指定Section添加数据项
addDataPoint(sectionIdx: number): void {
  this.myObject.sections[sectionIdx].dataPoints.push({ key: '', value: '' });
}

// 删除指定Section中的数据项
removeDataPoint(sectionIdx: number, itemIdx: number): void {
  this.myObject.sections[sectionIdx].dataPoints.splice(itemIdx, 1);
}

方案2：封装Map的访问方法（保留Map结构） #

如果必须保留Map<string, string>结构，需要在组件类中封装get/set方法，让ngModel可以正确绑定。

组件类中的核心方法

// 获取Map中的值
getMapValue(sectionIdx: number, key: string): string {
  return this.myObject.sections[sectionIdx].dataPoints.get(key) || '';
}

// 设置Map中的值
setMapValue(sectionIdx: number, key: string, value: string): void {
  this.myObject.sections[sectionIdx].dataPoints.set(key, value);
}

// 添加新的键值对到Map
addMapEntry(sectionIdx: number): void {
  const newKey = `new-key-${Date.now()}`;
  this.myObject.sections[sectionIdx].dataPoints.set(newKey, '');
}

// 删除Map中的键值对
removeMapEntry(sectionIdx: number, key: string): void {
  this.myObject.sections[sectionIdx].dataPoints.delete(key);
}

// 修改Map的键（需删除旧键并添加新键）
updateMapKey(sectionIdx: number, oldKey: string, newKey: string): void {
  const value = this.myObject.sections[sectionIdx].dataPoints.get(oldKey);
  if (value && newKey && oldKey !== newKey) {
    this.myObject.sections[sectionIdx].dataPoints.delete(oldKey);
    this.myObject.sections[sectionIdx].dataPoints.set(newKey, value);
  }
}

组件模板

<ul>
  <li *ngFor="let section of myObject.sections; index as sectionIdx">
    <button (click)="addSection()">添加Section</button>
    <button (click)="removeSection(sectionIdx)" *ngIf="myObject.sections.length > 1">删除Section</button>
    <button (click)="addMapEntry(sectionIdx)">添加数据项</button>

    <ul>
      <li *ngFor="let entry of section.dataPoints | keyvalue">
        <mat-form-field appearance="fill">
          <mat-label>Label:</mat-label>
          <input matInput 
                 [ngModel]="entry.key" 
                 (ngModelChange)="updateMapKey(sectionIdx, entry.key, $event)">
        </mat-form-field>

        <mat-form-field appearance="fill">
          <mat-label>Content:</mat-label>
          <input matInput 
                 [ngModel]="getMapValue(sectionIdx, entry.key)" 
                 (ngModelChange)="setMapValue(sectionIdx, entry.key, $event)">
        </mat-form-field>

        <button (click)="removeMapEntry(sectionIdx, entry.key)" *ngIf="section.dataPoints.size > 1">删除数据项</button>
      </li>
    </ul>
  </li>
</ul>

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