ngModelバインドは、複数のチェックボックスでは動作しません

Question

私はそれがこのように見えるが、それはブラウザ上で表示するときにも、その値があれば、すべてのチェックボックスをチェックし、私のテンプレートで今、この

[{value: 6, name: "delete-wews", checked: false} 
{value: 5, name: "update-user", checked: false} 
{value: 4, name: "search-user", checked: true} 
{value: 3, name: "list-user", checked: false} 
{value: 2, name: "find-user", checked: false} 
{value: 1, name: "create-user", checked: true}] 

のように見えるデータを持っています偽です。 "チェックされた"キーが真であるかどうかをチェックする必要があります。それ以外の場合はfalseになります。

<div class="checkbox" *ngFor="let permission of permissions"> 
     <label> 
     <input type="checkbox" 
      name="permissions" 
      [(ngModel)]="permission.checked" 
      value="{{permission.id}}"> 
      {{permission.name}} 
    </label> 
</div> 

と私のコントローラコードあなたはその配列を反復するためngForを使用していて、すべてのアイテムに同じ名前の属性を設定しているので、この https://gist.github.com/eaponiente/cc108bfafb2789229e917283e0b8db09

Answer 1

そのです。異なる値を保持するためには、それぞれ固有のものが必要です。

<div class="checkbox" *ngFor="let permission of permissions; let i = index"> 
    <label> 
    <input type="checkbox" 
     [name]="'permissions'+i" 
     [(ngModel)]="permission.checked" 
     value="{{permission.id}}"> 
     {{permission.name}} 
</label>