角度2 ngModelのチェックボックス双方向データのバインド編集フォーム

Question

現在選択されているタスクを編集できるフォームを作成しようとしています。フォームは、選択したタスクのデータを入力します。

双方向データバインディングにngModelを使用するチェックボックスがあります。

ngForには、双方向データバインディングにngModelを使用するチェックボックスもあります。

を使用しないでngModelを使用するチェックボックスは、私が意図している方法で動作します。チェックボックスが変更（チェック/チェック解除）されると、キャンセルボタンを押した後に最初に設定された値にリセットされます。

__________MYのISSUE IS__________

ngForとngModelは異なる動作を使用していますチェックボックス。チェックボックスが変更（チェック/チェック解除）されている場合、キャンセルボタンを押した後に現在設定されている値はすべて保持されます。

キャンセルボタンをクリックすると値をリセットしたいと思います。

__________QUESTION__________

ngFor振る舞い内部のチェックボックスが異なり、その後ngFor内にないチェックボックスはなぜ？

__________CODE BELOW__________

Check Plunker Demo

コンポーネントtask.component.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-task', 
    templateUrl: './task.component.html', 
}) 
export class TaskComponent implements OnInit { 

    constructor() {} 

    ngOnInit() { 
    } 

    staffs = [{id: 1, name: 'John', allowed: true, tasks: [] }, {id: 2, name: 'Ana', allowed: true, tasks: [] }]; 
    tasks = [ 
     { 
      id: 1, 
      name: 'Move object with mind', 
      duration: 30, 
      enablePoint: true, 
      enableGodlike: false, 
      staffs: [ 
       { 
        staffId: 1, 
        name: 'John', 
        allowed: true, 
       }, 
       { 
        staffId: 2, 
        name: 'Ana', 
        allowed: true, 
       } 
      ] 
     } 
    ]; 

    id: number; 
    name: string; 
    enablePoint: boolean; 
    enableGodlike: boolean; 
    selectedTaskStaffs: any[]; 
    editTaskState: boolean = false; 


    // TASKS 
    showEditTaskForm(task) { 
     this.id     = task.id; 
     this.name     = task.name; 
     this.enablePoint   = task.enablePoint; 
     this.enableGodlike   = task.enableGodlike; 
     this.selectedTaskStaffs = task; 
     this.editTaskState   = true; 
    } 


    editTask() { 
     // run edit code here 
     this.editTaskState = false; 
    } 


    closeEditTaskForm() { 
     this.editTaskState = false; 
    } 

} 

HTML task.component.html

<!-- EDIT TASK FORM --> 
<div *ngIf=" 
     editTaskState === true" 
     class="panel mar-top-4"> 

    <form (submit)="editTask()"> 

     <div class="row"> 
      <div class="small-12 columns"> 

       <h2 class="text-center mar-tb-2">Edit Task</h2> 

       <input 
        [(ngModel)]="enablePoint" 
        name="enablePoint" 
        type="checkbox" 
        id="point"> 
        <label for="point">Enable Point (if uncheck, this resets to initial value(true) after cancel)</label> 
       <br> 
       <input 
        [(ngModel)]="enableGodlike" 
        name="enableGodlike" 
        type="checkbox" 
        id="godlike"><label for="godlike">Enable Godlike (if check, this resets to initial value(false) after cancel)</label> 
       <hr> 


       <h2 class="text-center mar-tb-2">Staff</h2> 
       <div class="row"> 
        <div *ngFor="let staff of selectedTaskStaffs.staffs" class="small-6 columns"> 
         <label> 
          <input 
          [(ngModel)]="staff.allowed" 
          name="staff{{staff.staffId}}" 
          type="checkbox"> 
          {{staff.name}} (if uncheck, this <strong>DOESN'T</strong> resets to initial value(true) after cancel) 
         </label> 
        </div> 
       </div> 
       <hr> 


       <div class="clearfix"> 
        <button (click)="deleteTask()" type="button" class="button alert float-left">Delete</button> 
        <button type="submit" class="button float-right">Edit</button> 
        <button (click)="closeEditTaskForm()" type="button" class="button secondary float-right">Cancel</button> 
       </div> 


      </div> 
     </div> 
    </form> 
</div> 



<!-- LIST OF TASKS --> 
<div *ngIf=" 
      editTaskState === false" 
      class="panel"> 

    <div class="row"> 
     <div class="small-12 columns"> 

      <h2 class="mar-top-3">Tasks</h2> 

      <table> 
       <thead> 
        <tr> 
         <th>Task</th> 
         <th>Duration</th> 
         <th>Point</th> 
         <th>Godlike</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr (click)="showEditTaskForm(task)" *ngFor="let task of tasks"> 
         <td>{{task.name}} (click to edit)</td> 
         <td>{{task.duration}}</td> 
         <td>{{task.enablePoint}}</td> 
         <td>{{task.enableGodlike}}</td> 
        </tr> 
       </tbody> 
      </table> 

     </div> 
    </div> 

</div> 

Answer 1

ngFor内のチェックボックスの動作が異なり、ngForの内部にある のチェックボックスが異なるのはなぜですか？

ngForの内側にあなたが変更可能なオブジェクト参照を操作しながら、（bool）不変プリミティブngFor使用せずにチェックボックスが

this.enablePoint = task.enablePoint; 
this.enableGodlike = task.enableGodlike; 

値のでまもなく、それはです：あなたがselectedTaskStaffs以内プロパティを変更する場合

this.selectedTaskStaffs = task; 

をtaskも変更されます