复选框状态不反映Angular 2中的ngModel值

时间:2017-09-05 09:38:15

标签: javascript angular checkbox angular2-template angular2-ngmodel

所以我的问题是我有一个状态不反映其ngModel值的复选框。 让我解释一下这个架构:我有一个管理产品列表的服务,以及一个应该显示该列表并让用户选择或取消选择任何产品的组件。如果用户取消选择产品并且没有选定的产品,我会尝试重新选择它们。但是当我这样做时,触发事件的复选框不会更新(图形化,因为它的ngModel是),而所有其他复选框都是正确更新的。

所以这是服务(我使用BehaviourSubject以便我的组件可以监听它的更改):

@Injectable()
export class ProductService {
    private productsSubject: BehaviorSubject<Array<{name: string, selected: boolean}>>
    public products = this.productsSubject.asObservable();

    constructor() {
        this.productsSubject.next([
            {name: 'Product 1', selected: true},
            {name: 'Product 2', selected: true},
            {name: 'Product 3', selected: true}
        ]);
    }

    public select(name: string) {
        // In this method I change "selected" for the corresponding product.
        // if no product is selected, I select them all.
    }
}

以下是组件视图:

<li *ngFor="let product of ProductService.products | async">
      {{product.name}}{{product.selected}}
      <input type="checkbox" [(ngModel)]="product.selected" (ngModelChange)="ProductService.select(product.name)">
</li>

对于它自己的组件,除了注入ProductService之外没什么特别的。

最后,当我运行应用程序时,一切正常,当我选中并取消选中复选框时,模型会更新,复选框状态也会更新。除了一种情况

开始:

Product 1 -> selected: true + checkbox ticked
Product 2 -> selected: false + checkbox not-ticked
Product 3 -> selected: false + checkbox not-ticked

我取消选中第一个产品,&#34;选择&#34;方法完成了重新选择所有产品的工作,我有这个:

Product 1 -> selected: true + checkbox **NOT-TICKED**
Product 2 -> selected: true + checkbox ticked,
Product 3 -> selected: true + checkbox ticked

你知道为什么触发事件的复选框没有以图形方式更新吗?

提前感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

目前您正在使用单向数据绑定:

[ngModel]="product.selected"

使用双向数据绑定:

[(ngModel)]="product.selected"

所以更改会反映在您的用户界面中。

答案 1 :(得分:0)

要使用ngModel,您需要具有一个name属性,此外,如果您使用的是引导样式的复选框,它实际上会隐藏该复选框,在这种情况下,您需要在标签上使用for="id"。通常,我设置<input type="checkbox" name="something" id="something" >