각도 2 ngModel 확인란 양방향 데이터 바인딩 편집 양식

Question

현재 선택한 작업을 편집 할 수있는 양식을 만들려고합니다. 양식은 선택된 작업의 데이터를 채 웁니다.

양방향 데이터 바인딩에 ngModel을 사용하는 체크 박스가 있습니다.

또한 양방향 데이터 바인딩에 ngModel을 사용하는 ngFor에 대한 확인란이 있습니다.

없이 ngModel을 사용하는 확인란은 내가 의도 한대로 동작합니다. 확인란이 변경되면 (선택/선택 취소) 취소 버튼을 누른 후 초기 설정 값으로 재설정됩니다.

__________MY 이슈 IS__________

ngForngModel와는 다르게 작동 사용 체크 박스. 체크 박스가 변경되면 (선택/선택 취소) 취소 버튼을 누른 후 현재 설정되어있는 값이 그대로 유지됩니다.

취소 버튼을 클릭하면 값을 재설정하고 싶습니다.

__________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 내부 동안 ngFor 사용 (bool가)

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

을 기본 값 불변없이 체크 박스 : 당신이 다음 selectedTaskStaffs 내에서 속성을 변경하는 경우

this.selectedTaskStaffs = task; 

을 task도 변경됩니다.