禁用的绑定不适用于使用 *ngFor 生成的复选框答案

【问题标题】：Disabled binding not working for checkboxes generated with *ngFor禁用的绑定不适用于使用 *ngFor 生成的复选框
【发布时间】：2018-04-30 10:47:04
【问题描述】：

我有一个要绑定到复选框的对象列表。我遇到的问题是，当我只想禁用列表中的特定复选框时，我的所有复选框都将被禁用。设置 *ngfor 和复选框的正确方法是什么？在这里，我使用PrimeNg checkbox，但如果您知道常规复选框，那将是一个有用的垫脚石。

component.ts 有这个：

 this.options = [
            { name: "A", checked: true, disabled: true },
            { name: "B", checked: false, disabled: false },
            { name: "C", checked: false, disabled: false },
        ];

component.html:

<div class="form-group row">
    <span *ngFor="let test of options; let i=index" class="col-sm-4">
        <p-checkbox binary="true" [(ngModel)]="test.checked" label="{{test.name}}"
            [ngModelOptions]="{standalone: true}" disabled="{{test.disabled}}"></p-checkbox>
    </span>
</div>

【问题讨论】：

标记错误，请更正并提及更改

标签： angular checkbox primeng

【解决方案1】：

更改您设置禁用的方式

// this will always set a disabled attribute. Problem is, as soon as the attribute exists,
//  the browser disables the input. As a result, all your inputs are disabled
disabled="{{test.disabled}}"

// this binds to the DOM property, not the element attribute. When the property is false
// the browser removes the attribute from the DOM and the input is enabled
[disabled]="test.disabled"

【讨论】：