Question

我正在尝试创建一个允许您编辑当前所选任务的表单。表单填充所选任务的数据。

我的复选框使用ngModel进行双向数据绑定。

我还在ngFor上设置了使用ngModel进行双向数据绑定的复选框。

使用ngModel而没有ngFor的复选框的行为与我想要的方式相同。如果复选框更改（选中/取消选中），则会在点击取消按钮后重置为初始设置的值。

__________我的问题是__________

ngModel与ngFor一起使用的复选框表现不同。如果复选框发生更改（选中/取消选中），则在按下取消按钮后，它将保留当前设置的任何值。

如果单击取消按钮，我希望重置其值。

__________ QUESTION __________

为什么ngFor内的复选框与ngFor内的复选框的行为不同？

__________以下代码__________

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）值

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

在ngFor内部操纵可变对象引用：

this.selectedTaskStaffs = task;

如果您在selectedTaskStaffs内更改了属性，那么您的task也会更改

Angular 2 ng For ngModel复选框以编辑形式进行双向数据绑定

1 个答案: