ngModel和ngFor with Angular中的Map-Java 学习之路

我正在尝试使用带有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>

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的原始设置和删除方法

在你的.html中：

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

回复于 2024-05-01T11:02:50+08:00

ngModel和ngFor with Angular中的Map

1 回答

相关问题