ngModel 和 ngFor 与 Angular 中的 Map

【问题标题】：ngModel and ngFor with Map in AngularngModel 和 ngFor 与 Angular 中的 Map
【发布时间】：2018-07-24 06:26:10
【问题描述】：

我正在尝试使用带有 ngfor 的字符串布尔映射来创建复选框列表，但这种方法不起作用。

.ts

plainMap: Map<string, boolean> = new Map<string, boolean>();

.html

<div *ngFor="let item of plainMap">
   <input [(ngModel)]="plainMap.get(item)" type="checkbox" name="item.name" value="item.name">
</div>

【问题讨论】：

能否提供更多代码
什么是filterMap？
抱歉，已修复。
plainMap 是可迭代的？？
实际上必须添加 *ngFor="let item of plainMap.keys()" 使其可迭代但 [(ngModel)] 绑定不起作用

标签： angular typescript ngfor ngmodel

【解决方案1】：

我的解决方案是向组件类添加一个属性并将其命名为：“iterablePlainMap”。

添加到您的 .ts 中：

plainMap = new Map<String, boolean>();

iterablePlainMap;

deleteEntry(key: string) {
   this.plainMap.delete(key);
   this.updateIterablePlainMap();
}

setEntry(key: string, value: boolean) {
   this.plainMap.set(key, value);
   this.updateIterablePlainMap();
}

updateIterablePlainMap() {
   this.iterablePlainMap = [];
   this.plainMap.forEach((value, key) => {
       this.iterablePlainMap.push({ value, key });
   });
}

实际上setEntry 和deleteEntry 方法是包装plainMap 的原始set 和delete 方法

在你的 .html 中：

<div *ngFor="let item of iterablePlainMap;let index = index;trackBy:trackByIndex;">
   <input [(ngModel)]="iterablePlainMap[index].value" type="checkbox">
</div>

【讨论】：