Question

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

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

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

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();
    }
}

如您所见：

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

预期行为：

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

观察到的行为：

当我切换一个复选框并将模型输出到控制台时，我发现根本没有变化。

Answer 1

ngModel语法错误，因为此复选框值未绑定，因此请像这样更改它

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

Answer 2

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

[(attribute or prop)]

代码：

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

Answer 3

您的代码是正确的，但是您犯了一些错误... ngModel应该写为 [（ngModel）] ，而不是（[ngModel]） ：香蕉放在盒子里而不是香蕉盒里。：）

因此代码将是：

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

Answer 4

最后对我有用的（所有其他答案都很好），是确保将FormsModule导入到您的模块中。

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

NgModel不更新复选框中的模型

4 个答案: