[英]Prevent animation when mat-slide-toggle is added with ngFor
In my angular app, I have a settings page where user can check several options. 在我的角度应用程序中,我有一个设置页面,用户可以在其中检查几个选项。 I use
mat-slide-toggle
for all options. 我将
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
member is initialized with a copy of current setting values, and all changes done by user are reflected in this copy. visibleSettings
成员使用当前设置值的副本进行初始化,并且用户所做的所有更改都将反映在该副本中。 User can discard or save changes after modifying settings. 修改设置后,用户可以放弃或保存更改。 Whenever user discards or saves changes,
visibleSettings
gets re-initialized with a copy of latest settings. 每当用户放弃或保存更改时,
visibleSettings
都会使用最新设置的副本进行重新初始化。
When visibleSettings
gets re-initialized, the slide toggles which should be in checked state initially becomes unchecked, and then it gets checked with an animation. 重新初始化
visibleSettings
时,最初应处于检查状态的幻灯片切换将变为未检查状态,然后通过动画对其进行检查。 This is a distraction to the user, since whenever user saves or discards, the settings which were checked get unchecked for a moment and gets checked again. 这使用户分心,因为每当用户保存或丢弃时,选中的设置都会暂时取消选中,然后再次选中。
Is there any way to prevent this and make slide toggles to stay in the state specified by the [ngModel]="setting.value"
whenever the visibleSettings
gets re-initialized? 有什么方法可以防止这种情况,并且只要
visibleSettings
重新初始化,就可以使幻灯片切换保持在[ngModel]="setting.value"
指定的状态?
Try binding the slide-toggle to checked instead of using ngModel. 尝试将slide-toggle绑定到checked,而不是使用ngModel。 Usually, [ngModel] goes hand-in-hand with (ngModelChange) for use in template driven forms.
通常,[ngModel]与(ngModelChange)配合使用,以用于模板驱动的表单。 Slide toggle has its own counterparts [checked] and (change) which are for use without a form.
幻灯片切换器具有自己的对应部分[已选中]和(更改),无需使用表格即可使用。 I suspect mixing the two separate models could be your issue.
我怀疑将两种不同的模型混合使用可能是您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.