在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）配合使用，以用於模板驅動的表單。 幻燈片切換器具有自己的對應部分[已選中]和（更改），無需使用表格即可使用。 我懷疑將兩種不同的模型混合使用可能是您的問題。