Question

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

.ts

max_locks_per_transaction

.html

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

Answer 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>

ngModel和ngFor与Angular中的Map

1 个答案: