javascript - 如何使用输入值填充 Map

Question

Stackblitz
我有以下型号

export class Items {
  items: Map<string, string>;
  createdBy: string;
  deliveredBy: string;
}

我想根据数组中的项目动态创建输入字段，我无法弄清楚如何在这些字段中填充数据。

<form>
    <tr>
        <td *ngFor="let item of myStringArray">
            Map {{item}}<input name="value" ([ngModel])="data.items.set(item)" (ngModelChange)="onChange()">
    </td>
        <td>
            Always Present One <input ([ngModel])="data.createdBy" (ngModelChange)="onChange()" />
    </td>
        <td>
            Always Present Two<input ([ngModel])="data.deliveredBy" (ngModelChange)="onChange()" />
    </td>
    </tr>
</form>

{{ data.items | json }}

组件.ts

export class AppComponent {
  public myStringArray = ["First", "Second", "Third"];
  data = new Items();

  onChange() {
    console.log(this.data);
  }
}

我找到了一个引用，但我不确定我哪里出错了
Reference Stackblitz
感谢您的时间和帮助

Answer 1

Stackblitz 中有多个错误:

您不能直接绑定(bind)到 Map在 ngModel 内.您需要 get在 ngModel和 set在 ngModelChange :

<td *ngFor="let item of myStringArray">
  Map {{item}}<input name="value" [ngModel]="data.items.get(item)" 
(ngModelChange)="data.items.set(item, $event)">
</td>

双向绑定(bind)的语法是“盒子里的香蕉”[(...)]不是相反:

Always Present One <input [(ngModel)]="data.createdBy" />

根据控制台错误“如果在表单标记中使用 ngModel，则必须设置名称属性或必须在 ngModelOptions 中将表单控件定义为‘独立’。”您需要设置 ngModelOptions或添加名称字段:

Always Present One <input [(ngModel)]="data.createdBy" name="createdBy" (ngModelChange)="onChange()" />

这是一个新的 Stackblitz固定的。