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重新初始化时，最初应该处于检查状态的幻灯片切换将取消选中，然后通过动画检查它。这会分散用户的注意力，因为每当用户保存或丢弃时，检查的设置会暂时取消检查并再次检查。

有没有办法阻止这种情况，并且只要[ngModel]="setting.value"重新初始化，幻灯片切换就会保持在visibleSettings指定的状态？

Answer 1

尝试将幻灯片切换绑定到已检查而不是使用ngModel。通常，[ngModel]与（ngModelChange）一起用于模板驱动表单。幻灯片切换有自己的对应[已检查]和（更改），无需表单即可使用。我怀疑混合两个单独的模型可能是你的问题。

使用ngFor添加mat-slide-toggle时防止动画

1 个答案: