angular - mat-slide-toggle [checked] 属性似乎不起作用

Question

我有一个 <mat-slide-toggle>我是这样定义的:

<mat-slide-toggle [checked]="synchronizationState === 'ENABLED'"
                  [disabled]="!canChangeSynchronizationState"
                  formControlName="enableSynchronization"
                  #enableSynchronizationToggle
                  (change)="openConfirmSynchronizationStateDialog(enableSynchronizationToggle.checked)">
</mat-slide-toggle>

然而，当用户点击开关时，它会改变状态(如果选中，则未选中，反之亦然)，即使 synchronizationState没有改变。

我已经像这样进一步测试了组件: <mat-slide-toggle [(ngModel)]="checked" [checked]="checked"></mat-slide-toggle>其中 checked = false;看来我仍然可以更改开关的状态。

看起来 mat-slide-toggle 根本不关心我在 [checked] 中输入的内容，我在这里做错了什么？

Answer 1

不确定目标/用例，但这是设计使然。

虽然它可以被操纵，但强烈建议重新考虑目标的用户体验。可能是不同的控制或工作流程

添加了一个 stackblitz 来操纵状态在控制切换时始终为真:

https://stackblitz.com/edit/angular-elks1e?file=src/app/slide-toggle-overview-example.ts