Question

我有一个对象列表，我想绑定到复选框。我遇到的问题是，当我只想禁用列表中的特定复选框时，我的所有复选框都将被禁用。设置* 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>

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

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

1 个答案: