更新Angular中的自定义复选框组件视图

Question

我为我的应用程序创建了一个自定义切换开关，并在多个地方使用了它。我决定将其重写为组件。但是现在我遇到了一个问题，即切换开关按钮在视图中不被更新（无论如何始终设置为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>

这也是我的切换开关的屏幕快照，该页面在页面加载后（并且从后端接收到值），并且在它下面有应该设置为的值（在本示例中为否）。我可以手动切换值，然后一切正常。问题出在应用程序第一次使用这些开关加载某些视图之后。

Answer 1

尝试在输入中将[disabled]替换为[attr.disabled] =“您的逻辑在这里...”