我有一个模型，基本上是一个对象列表，每个对象都包含一个布尔值。这些布尔值必须是用户可更新的，因此我编写了一个组件，为每个对象创建一个复选框，然后将该复选框与其背后的模型绑定。
然而，这是行不通的！如果我选中一个复选框，它绑定到的模型似乎根本没有更新。
为了说明我的问题，我创建了一个最小的工作示例：
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）
- 我添加了一个按钮，用于在控制台中输出数据，以验证模型的当前状态。
预期行为：
- 当我切换复选框时，模型中的布尔值应该反映复选框的状态，反之亦然
观察到的行为：
- 当我切换一个复选框并将模型输出到控制台时，我没有观察到任何变化。
5条答案
按热度按时间gab6jxml1#
你的代码是正确的，但你犯了一个小错误…ngModel应该写成**[（ngModel）]而不是（[ngModel]）**famous line：香蕉在盒子里而不是香蕉在盒子里。：）
所以代码将是：
lnxxn5zx2#
ngModel语法错误，因此复选框值未绑定，因此请将其更改为bq8i3lrv3#
您输入的
ngModel不正确。双向绑定语法的正确方法是[(attribute or prop)]代码：
snz8szmq4#
最后对我起作用的是（所有其他答案也是有效的）确保FormsModule导入到模块中。
如果组件是延迟加载的，它不会给予错误消息，但“延迟模块”仍然需要它。
dgenwo3n5#
我读取查询参数来设置视图状态，但我始终无法使复选框正确绑定到布尔值。我只是切换到使用数字0或1作为值，然后相应地处理逻辑。我刚刚使用了
"<input type="checkbox" name="includeShipped" id="includeShipped" (click)="toggleIncludeState()" />"，我想有些东西会混淆，比如值是否为null，empty，boolean，string等。（因为查询值是字符串：any），然后更改没有被正确触发。在我的构造函数中，我读取查询值：在那里使用[（ngModel）]并使用布尔值会很好，但我放弃了让它工作。