CODEWITHSUNDEEP
angulartypescriptngforngmodel
sander
sander

Reputation: 1654

ngModel and ngFor with Map in Angular

I'm trying to use a string boolean map with ngfor to create a list of checkboxes, but this approach doesn't work.

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

Upvotes: 0

Views: 2421

Answers (1)

SoroushNeshat
SoroushNeshat

Reputation: 674

my solution is adding a property to component class and call it : "iterablePlainMap" .

add to your .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 });
   });
}

actualy setEntry and deleteEntry methods are wraping original set and delete methods of plainMap

and in your .html :

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

Upvotes: 1

Related Questions