угловой / материал мат-слайд-тумблер - PullRequest
Новая
       38

угловой / материал мат-слайд-тумблер

0 голосов
/ 22 октября 2019

Я использую mat-slide-toggle для изменения некоторых настроек. HTML-код выглядит следующим образом: 

<mat-slide-toggle type="checkbox" class="form-control" color="#3f9f94" [checked]="clickDataLogEnabled"
        [(ngModel)]="clickDataLogEnabled" (click)="onClick('clickData')">
        Log User Click data</mat-slide-toggle><br>

Начальное значение clickDataLogEnabled равно true.

Функция щелчка выглядит следующим образом: 

console.log("clickData log "+this.clickDataLogEnabled);
                //this.settingsService.setClickDataLogEnabled(!this.clickDataLogEnabled);
                this.clickDataLogEnabled = !this.clickDataLogEnabled;
                console.log("clickData log2 "+this.clickDataLogEnabled);
                //this.settingsService.updateSettings();

Когда янажмите на кнопку, начальный console.log дает true (1), а следующий clickDataLogEnabled дает false (0). Но, когда я нажимаю на него снова, я получаю тот же вывод в том же порядке, когда порядок должен был измениться. Также, когда я нажимаю, кнопка остается включенной. Я должен сдвинуть его, чтобы внести изменения в пользовательский интерфейс, но в данный момент на консоли нет логов. Может кто-нибудь сказать мне, что я делаю не так. Спасибо.

1 Ответ

0 голосов
/ 22 октября 2019

Вам не нужно менять clickDataLogEnabled вручную в методе onClick. Это нужно сделать, если вы используете только свойство [checked]. Я предлагаю вам не использовать как [checked], так и [(ngModel)].

. Если вы выберете [(ngModel)], вам не придется иметь дело с логикой переключения, поскольку это будет сделано автоматически. (Ваш clickDataLogEnabled будет изменен при нажатии / переключении).

Шаблон: 

<mat-slide-toggle type="checkbox" class="form-control" color="#3f9f94" 
        [(ngModel)]="clickDataLogEnabled" (click)="onClick('clickData')">
        Log User Click data</mat-slide-toggle><br>

Теперь функция нажатия должна быть в порядке. Вам не нужно делать логику переключения. 

console.log("clickData log " + this.clickDataLogEnabled);
// this.clickDataLogEnabled = !this.clickDataLogEnabled; Remove This Line
...