Компонент обертки для группы переключателей материала (угловой 7)

Question

Я пытаюсь создать компонент оболочки для материала button-toggle-group.Я должен добавить много пользовательских стилей для него, поэтому имеет смысл сделать это в компоненте, чтобы я мог импортировать этот компонент позже, а не делать это каждый раз.Тем не менее, я попал в ловушку.Нажать кнопку можно только один раз, и тогда она будет проверена навсегда.Кроме того, все кнопки могут быть проверены одновременно.Что мне интересно, так это:

• Как изменить выбранную кнопку при выборе опции?
• Как я могу использовать логическое значение в наборе данных, чтобы установить одну из кнопок напроверено по умолчанию?
• Кроме того, как я могу ограничить его одним выбором за раз?Я попытался установить для «множественного» параметра значение false, но, похоже, это не сработало.

Я предоставил то, что у меня есть, в Stackblitz - по какой-то причине это не загружает материалтема правильно, но вы все равно можете увидеть проблему и то, что у меня так далеко: 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