Angular mat-button-toggle 渲染不绑定到 ngModel

Question

我一直在尝试修复 mat-button-toggle 元素呈现为 "selected" 的错误，即使 ngModel 具有 false 值。我发现了一些东西，至少对我来说看起来很奇怪。考虑一个代码示例：

.html

<mat-button-toggle 
    [(ngModel)]="myVar" 
    (change)="toggle()"
    ngDefaultControl
    name="myVar">
  TOGGLE ME
</mat-button-toggle>

.ts

myVar = false
toggle() {
    // do nothing!
}

我预计：

单击按钮后，它不会呈现为 "selected"，因为 myVar 仍然具有 false 值。

实际发生了什么：

按钮呈现为 "selected"，忽略实际的 myVar 值。

我觉得我错过了一些核心 Angular 理解，这让我无法理解为什么它不像我期望的那样工作。你能帮我理解这里出了什么问题吗？

Answer 1

MatButtonToggle 不支持angular 的双向绑定。要使 Angular 两个绑定正常工作，组件需要实现 ControlValueAccessor 而 MatButtonToggle 不需要。相反，您可以监听事件并手动绑定它。

<mat-button-toggle 
  [checked]="myFlagForButtonToggle" 
  (change)="myFlagForButtonToggle = $event.source.checked">
    Toggle me!
</mat-button-toggle>

Angular mat-button-toggle 渲染不绑定到 ngModel

Angular mat-button-toggle rendering does not bind to ngModel

typescript

angular-material

ngmodel

angular