从按钮Angular2取消选中复选框答案

【问题标题】：unchecking a checkbox from a button Angular2从按钮Angular2取消选中复选框
【发布时间】：2017-11-01 15:34:31
【问题描述】：

我正在使用 Angular2 开发一个项目。我有一个名为品牌的列表，其中包含其他称为描述的列表。

此列表将创建复选框：

<div *ngFor="let brand of brands">
    {{ brand.category }}
    <div*ngFor="let description of brand.descriptions" >
        <input type="checkbox" name="checkbox" />{{ description.value }}
    </div>
</div>

我有两个文本框：

<input name="brand" />
<input name="description" />
<button>uncheck</button>

按钮事件将仅取消选中带有品牌和输入中提到的描述的复选框，而不会更改或重建列表，因为我需要保持复选框的状态正确。

有什么想法吗？

【问题讨论】：

标签： angular events checkbox

【解决方案1】：

我找到了一个解决方案，我只需要给复选框一个 ID，然后我将更改从 typescript 调用它：

    <div *ngFor="let brand of brands">
        {{ brand.category }}
        <div*ngFor="let description of brand.descriptions" >
            <input type="checkbox" name="checkbox"
             [id]="brand.category.replace(' ', '') + description.value.replace(' ','')"/>
            {{ description.value }}
        </div>
    </div>

然后从打字稿：

onclick(category, description) {
  const element = <HTMLInputElement> document.getElementById(category.replace(' ', '') + description.replace(' ', ''));
  element.checked = false;
}

【讨论】：

【解决方案2】：

您需要在某处保存它的值，例如将字段 isChecked 添加到 description 对象，然后像 Gabriel 所说的那样绑定它。

<input [(ngModel)]="description.isChecked" type="checkbox"/>

【讨论】：

【解决方案3】：

要进行双向数据绑定，您需要将值分配给模型。

<input [(ngModel)]="checkboxFlag" type="checkbox"/>

This answers your question

【讨论】：