NgModel 未在复选框中更新模型答案

【问题标题】：NgModel not updating model in checkboxNgModel 未在复选框中更新模型
【发布时间】：2019-07-09 10:50:55
【问题描述】：

我有一个模型，它基本上是一个对象列表，每个对象都包含一个布尔值。这些布尔值必须由用户更新，所以我编写了一个组件，为每个对象创建一个复选框，然后我将这个复选框与它后面的模型绑定。

但是这不起作用！如果我选中一个复选框，它所绑定的模型似乎根本没有更新。

为了说明我的问题，我创建了一个最小的工作示例：

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

@Component({
    selector: 'component-test',
    template: `
        <div *ngIf="!!data">
            <div *ngFor="let item of data">
                <ion-checkbox ([ngModel])="item.checked"></ion-checkbox>
            </div>
        </div>
        <ion-button (click)="console_log()">print output</ion-button>
    `
})
export class TestComponent {
    @Input() data: any;

    console_log() {
        console.log(this.data);
    }
}


@Component({
    selector: 'page-test',
    template: `
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title>
                    Test
                </ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <component-test [data]="params.data | async"></component-test>
        </ion-content>
    `
})
export class TestPage implements OnInit {

    params: any = {};

    async get_data() {
        return [{checked: false}, {checked: false}, {checked: false}];
    }

    ngOnInit() {
        this.params['data'] = this.get_data();
    }
}

如你所见：

数据在父组件中异步加载（页面测试）
数据被传递给一个测试组件（其中包含复选框）（组件测试）
我添加了一个按钮，用于在控制台中输出数据以验证模型的当前状态。

预期行为：

当我切换复选框时，模型中的布尔值应该反映复选框的状态，反之亦然

观察到的行为：

当我切换复选框并将模型输出到控制台时，我观察不到任何变化。

【问题讨论】：

标签： angular ionic-framework checkbox

【解决方案1】：

ngModel语法错误，因为复选框值没有绑定，所以请改成这样

<div *ngIf="!!data">
            <div *ngFor="let item of data">
                <ion-checkbox [(ngModel)]="item.checked"></ion-checkbox>
            </div>
        </div>

【讨论】：

谢谢，我在最小的工作示例中犯了一个错误，但它并没有解决我在实际组件中遇到的问题。至少我现在可以开始查明真正的问题是什么！

【解决方案2】：

你写错了ngModel。正确的双向绑定语法是

[(attribute or prop)]

代码：

<ion-checkbox [(ngModel)]="item.checked"></ion-checkbox>

【讨论】：

【解决方案3】：

你的代码是正确的，但你犯了一个小错误...... ngModel 应该写成 [(ngModel)] 而不是 ([ngModel]) 著名的行: 盒子里的香蕉不是盒子里的香蕉。 :)

所以代码将是：

<div *ngIf="!!data">
            <div *ngFor="let item of data">
                <ion-checkbox [(ngModel)]="item.checked"></ion-checkbox>
            </div>
        </div>

【讨论】：

【解决方案4】：

最终对我有用（所有其他答案也有效）是确保将 FormsModule 导入到您的模块中。

如果组件是延迟加载的，它不会给出错误消息，但“延迟模块”仍然需要它。

【讨论】：