Question

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

此列表将创建复选框：

<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>

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

任何想法？

Answer 1

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

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

This answers your question

Answer 2

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

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

Answer 3

我找到了一个解决方案，我只需要给复选框一个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>

然后从typescript：

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

取消选中Angular2按钮的复选框

3 个答案: