モデルが変更されても角度4のチェックボックスの状態は更新されません

Question

この問題はまだ開いていますが、この回避策によればAngular 2 - Checkbox not kept in syncは期待どおりに動作するはずです。

ロールに付与されている権限のリストがあります。ユーザーがロールを更新したい場合は、編集可能なロール名を持つフォームとそのリストをチェックボックスリストとして表示します。今度は、ロールに既にリストからのアクセス許可がある場合、リスト項目のいくつかをチェックする必要があります。

マイ形式：

<tr *ngFor ="let perm of permissions, let i = index"> 
     <td> 
      <label> 
      <input type="checkbox" 
        name="check-box-{{perm.permission_alias}}"            
        value="{{perm.permission_id}}" 
        (ngModel)="perm.checked" 
        (ngModelChange)="onSelectFilter($event,perm)" 
        attr.id="check-box-{{perm.permission_alias}}" 
        /> 
      {{perm.permission_alias}} 
      </label>         
     </td> 
    </tr> 

マイコンポーネント：

getPermissions(role: Role): void { 
    this.permissions = []; 
    this.userService.getPermissions().then(perms => {    
     if (role != null) { 
      this.permissions = perms; 
      for (let rp of role.permissions) {   
       let index = this.permissions.indexOf(this.permissions.find(p => p.permission_id == rp.permission_id)); 
       if (index >= 0) { 
        this.permissions[index].checked = true; 
        //this.onSelectFilter(true, this.permissions[index]); not sure if this should be called 
       }  
      } 
      console.log("before selected perms on update"); 
      console.log(this.permissions); 
     } 
     else { 
      this.permissions = perms; 
     } 

    }).catch(this.handleError); 
} 

    onSelectFilter(selected: boolean, filter: Permission) { 
     filter.checked = selected; 
     if (this.permissions.every(filter => !filter.checked)) { 
      setTimeout(() => { 
       this.permissions.forEach(filter => filter.checked = true); 
      }); 
     } 
    } 

私は、これが機能しない理由はわかりません、私はリストでチェック商品はありません。 助けていただければ幸いです。

Answer 1

これは機能します。常に双方向データバインディングを使用して同期を維持します。

<input type="checkbox" 
name="check-box-{{filter.text}}" 
[(ngModel)]="filter.selected" 
attr.id="check-box-{{filter.text}}"> 

変更時に一部の機能をトリガする必要がある場合は、変更イベントを使用します。

<input type="checkbox" 
name="check-box-{{filter.text}}" 
[(ngModel)]="filter.selected"' 
(change)="myCustomFun()" 
attr.id="check-box-{{filter.text}}"> 

はあなたの問題を回避するリンク機能していませんどの部分

Answer 2

ここでのエラーは、常に「アレイを突然変異させているためです。変更検出が実行されると、変更は行われず、ngForは更新されません。このコードを試してみてください。私がやっていることは、それを突然変異させる前に配列のコピーを作ることだけです。

getPermissions(role: Role): void { 
this.permissions = []; 
this.userService.getPermissions().then(perms => {    
    if (role != null) { 
     this.permissions = perms; 
     for (let rp of role.permissions) {   
      let index = this.permissions.indexOf(this.permissions.find(p => p.permission_id == rp.permission_id)); 
      if (index >= 0) { 
       this.permissions = this.permissions.slice(0) // copy the array. 
       this.permissions[index].checked = true; 
       //this.onSelectFilter(true, this.permissions[index]); not sure if this should be called 
      }  
     } 
     console.log("before selected perms on update"); 
     console.log(this.permissions); 
    } 
    else { 
     this.permissions = perms; 
    } 

}).catch(this.handleError); 
} 

    onSelectFilter(selected: boolean, filter: Permission) { 
    filter.checked = selected; 
    if (this.permissions.every(filter => !filter.checked)) { 
     setTimeout(() => { 
      this.permissions = this.permissions.slice(0) // copy the array. 
      this.permissions.forEach(filter => filter.checked = true); 
     }); 
    } 
}