材质切换组的包装器组件（角度7）

Question

我正在尝试为材料button-toggle-group创建一个包装器组件。我应该为其添加很多自定义样式，因此在组件中执行此操作很有意义，这样我以后就可以导入该组件，而不必每次都执行。但是，我遇到了障碍。只能单击一次按钮，然后将其永久选中。同样，可以同时检查所有按钮。我想知道的是：

• 选择选项后如何更改所选按钮？
• 如何使用数据集中的布尔值将按钮之一设置为默认选中？
• 此外，如何一次将其限制为一个选项？我尝试将“多个”参数设置为false，但这似乎不起作用。

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

Answer 1

一个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