Question

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

.html

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

.ts

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

我期望的是

单击按钮后，它不会呈现为“选定”状态，因为myVar仍具有false值。

实际发生的情况：

无论实际的myVar值如何，按钮都将显示为“已选择”。

我有一种感觉，我想念这里对Angular的一些核心了解，这使我无法理解为什么它不按我期望的那样工作。您能帮我了解这里出什么问题吗？

Answer 1

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

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

角垫按钮切换渲染未绑定到ngModel

1 个答案: