material 切换组的包装器组件 (Angular 7)

Question

我正在尝试为 material 按钮切换组创建包装器组件。我应该为它添加很多自定义样式，所以在组件中执行此操作很有意义，这样我就可以稍后导入该组件，而不是每次都这样做。但是，我遇到了障碍。只能点击一次按钮，然后永远被选中。此外，可以同时检查所有按钮。我想知道的是：

如何在选择选项时更改所选按钮？
如何使用数据集中的布尔值将其中一个按钮设置为默认选中？
另外，我怎样才能一次只能选择一个？我尝试将 "multiple" 参数设置为 false，但这似乎不起作用。

我已经在 Stackblitz 中提供了目前为止的内容 - 由于某种原因，这没有正确加载 material 主题，但您仍然可以看到问题以及我目前的内容： https://stackblitz.com/edit/angular-b7rxxq

Answer 1

A mat-button-toggle-group 旨在成为一组多个按钮...因为您的循环在 mat-button-toggle-group 上，您正在创建两个组，每个组包含一个按钮。

从 mat-button-toggle-group

中删除循环

<mat-button-toggle-group (change)="optionSelected($event)" multiple="false" [name]="label">

将其添加到 mat-button-toggle，这样您就可以将是和否合而为一 mat-button-toggle-group...还可以使用 [checked]="option.value 来默认值

<mat-button-toggle i18n="{{option.i18n}}" [value]="option.value" [checked]="option.value" *ngFor="let option of options" style="margin-left:15%">{{option.displayValue}}</mat-button-toggle>

请注意：一旦您的选项在一个组中，一次只能选择一个...一旦选择，您将无法取消选择...您将需要如果您需要取消选择的能力，请以编程方式执行此操作。

Stackblitz

https://stackblitz.com/edit/angular-rmn4k4?embed=1&file=src/app/toggle-wrapper/toggle-wrapper.component.html

material 切换组的包装器组件 (Angular 7)

Wrapper component for material toggle group (Angular 7)

angular-material

angular7