css - 在 Angular 中更新自定义复选框组件 View

Question

我为我的应用程序创建了一个自定义切换开关，并在多个地方使用了它。我决定将其重写为一个组件。但是现在我遇到了一个问题，即切换开关按钮没有在 View 中更新(无论如何它总是设置为 true)，这在它不是组件时不会发生。有时开关的值来自后端，我通过 Input() 将它们发送到组件 - 它在我检查时正确接收它们(变量 toggleValue 保持值我想要)但是按钮没有切换到正确的值。这是我的组件的代码示例(几乎完全参数化):

<label class="small-font">
   {{translationIsActive ? (toggleLabelText | translate) : toggleLabelText}} 
</label>
<div [ngClass]="toggleSwitchStyle" class="can-toggle">
    <input [id]="toggleElementId" type="checkbox" [value]="toggleValue"
    [disabled]="disabled" (click)="switchValue()">
    <label [for]="toggleElementId">
    <div class="can-toggle__switch"
        [attr.data-checked]="translationIsActive ? (toggleElementForTrue | 
        translate) : toggleElementForTrue"
        [attr.data-unchecked]="translationIsActive ? (toggleElementForFalse | 
        translate) : toggleElementForFalse">
    </div>
</label>

这也是页面加载后我的切换开关的屏幕截图(并且从后端接收到值)，在它下面，有应该设置为的值(在这个例子中 - 否)。我可以手动切换值，然后一切正常。问题出在应用程序首次使用这些开关加载特定 View 之后。

Answer 1

尝试在输入处将 [disabled] 替换为 [attr.disabled]='Your logic here...'