Angular2将map的值绑定到checkbox

时间:2017-05-19 23:22:29

标签: angular checkbox binding

我试图将地图的值绑定到angular2中的html复选框。

    this.profilType = new Map<string, boolean>();
    this.profilType.set("public", true);

    <input type="checkbox" [(ngModel)]="profilType['public']"/>

之前我试过这个,但它造成了错误。

    <input type="checkbox" [(ngModel)]="profilType.get('public')"/>

目前,没有显示任何错误,但似乎没有任何约束。

我通过使用(点击)机制找到了一些解决方案,但这不相关。 Checkbox确实需要对组件更改做出反应。

有没有办法做到这一点,或者我应该使用不同的方法(也欢迎建议)。

由于

1 个答案:

答案 0 :(得分:3)

我只能使用“香蕉盒子”语法来使用getter / setter:

  get isPublic(): boolean {
    return this.profilType.get("public");
  }

  set isPublic(val: boolean) {
    this.profilType.set("public", val);
  }

  <input type="checkbox" [(ngModel)]="isPublic" />

但你可以像这样直接调用地图:

<input type="checkbox" [ngModel]="profilType.get('public')" (ngModelChange)="profilType.set('public', $event)" />

请注意,这些getter会经常被调用。如果性能是个问题,那么最好使用ngModelChange将布尔值复制到地图或从地图复制:

  this.isPublic = true;
  this.profilType.set("public", true);

  public setPublic() {
    this.profilType.set("public", this.isPublic);
  }

<input type="checkbox" [(ngModel)]="isPublic" (ngModelChange)="setPublic()" />