Запретить анимацию при добавлении mat-slide-toggle с помощью ngFor - PullRequest
Новая
       11

Запретить анимацию при добавлении mat-slide-toggle с помощью ngFor

0 голосов
/ 29 мая 2018

В моем угловом приложении у меня есть страница настроек, где пользователь может проверить несколько опций.Я использую 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 переинициализируется?

1 Ответ

0 голосов
/ 30 мая 2018

Попробуйте привязать слайд-переключатель к флажку вместо использования ngModel.Обычно [ngModel] идет рука об руку с (ngModelChange) для использования в формах, управляемых шаблонами.Ползунковый переключатель имеет свои собственные аналоги [проверено] и (изменить), которые предназначены для использования без формы.Я подозреваю, что смешивание двух отдельных моделей может быть вашей проблемой.

...