在ngFor中添加mat-slide-toggle时禁止动画

Question

在我的角度应用程序中，我有一个设置页面，用户可以在其中检查几个选项。 我将mat-slide-toggle用于所有选项。

<div *ngFor="let setting of visibleSettings">
    <div style="display: flex;">
        <div>
            <p class="setting-name">{{setting.name}}</p>
            <p class="setting-description">{{setting.def.description}}</p>
        </div>
        <div style="flex: 1;"></div>
        <mat-slide-toggle
                class="toggle-setting"
                name="{{setting.name}}"
                [ngModel]="setting.value"
                (change)="onSettingChanged(setting, $event)">
        </mat-slide-toggle>
    </div>
</div>

visibleSettings成员使用当前设置值的副本进行初始化，并且用户所做的所有更改都将反映在该副本中。 修改设置后，用户可以放弃或保存更改。 每当用户放弃或保存更改时， visibleSettings都会使用最新设置的副本进行重新初始化。

重新初始化visibleSettings时，最初应处于检查状态的幻灯片切换将变为未检查状态，然后通过动画对其进行检查。 这使用户分心，因为每当用户保存或丢弃时，选中的设置都会暂时取消选中，然后再次选中。

有什么方法可以防止这种情况，并且只要visibleSettings重新初始化，就可以使幻灯片切换保持在[ngModel]="setting.value"指定的状态？

Answer 1

尝试将slide-toggle绑定到checked，而不是使用ngModel。 通常，[ngModel]与（ngModelChange）配合使用，以用于模板驱动的表单。 幻灯片切换器具有自己的对应部分[已选中]和（更改），无需使用表格即可使用。 我怀疑将两种不同的模型混合使用可能是您的问题。