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

Question

所以我的问题是我有一个复选框，其状态未反映其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

我取消选中第一个产品，“选择”方法完成了重新选择所有产品的工作，而我有：

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

您知道为什么触发事件的复选框没有以图形方式进行更新吗？

预先感谢您的帮助。

Answer 1

当前，您正在使用单向数据绑定：

[ngModel]="product.selected"

使用双向数据绑定：

[(ngModel)]="product.selected"

因此更改会反映在您的用户界面中。

Answer 2

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