Angular 2 - 复选框列表 - 如何检查复选框的状态

debugcn 发表于 Dev

托马斯

我正在使用 Angular 2 + Typescript，而且我刚刚开始使用很短的时间。我想列出复选框并检查它们的状态。

就像在一些购物网站中，复选框是公司，选择一些并按搜索按钮以显示所选公司的产品。

<ul class="companies">
    <li *ngFor="let company of companies">
        <input type="checkbox">{{ companies.name }}
    </li>
</ul>

“公司”是从数据库中获取的数组。每个公司只有一个 id 和一个名称。*ngFor 将为数组中的每个元素重复 li。每个 li 包含一个复选框和一个纯文本。

我不能给每个复选框一个 id。因此，我不知道如何检查它们的状态。我很感激任何帮助。

威廉·摩尔

如果您使用 a mat-checkbox，则可以@Output() change: EventEmitter<MatCheckboxChange>在值状态更改时使用事件调用方法。这看起来像这样：

<ul class="companies">
    <li *ngFor="let company of companies">
        <mat-checkbox (change)="onCheckboxStateChange($event, company.id);">{{ companies.name }}</mat-checkbox>
    </li>
</ul>

然后你需要onCheckboxStateChange(changeEvent: MatCheckboxChange, id: number)在你的 ts 类中使用一个方法来处理 check 事件。该changeEvent有一个属性checked，你可以按如下方式使用：

public onCheckboxStateChange(changeEvent: MatCheckboxChange, id: number) {
    const index = this.companies.findIndex(x => x.id === id);

    if (index === -1) {
        console.warn("Company not found");
        return;
    }

    companies[index].checked = changeEvent.checked;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。