Angular 角度/材料'；s垫滑动切换功能

我正在使用垫子滑动切换来更改一些设置。 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>

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）。但是，当我再次单击它时，我会以相同的顺序得到相同的输出，而顺序本应改变。此外，当我单击时，按钮仍处于切换状态。我必须滑动它来更改UI，但当时控制台上没有日志。有人能告诉我我做错了什么吗。谢谢。

您不必在

onClick

方法中手动更改

单击DataLogEnabled

。如果只使用

[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