我正在尝试将mat-accordion
与一组单选按钮一起使用,每个面板一个。如果选择了单选按钮,请展开该面板,关闭其他面板,然后按预期取消选择其他无线电。
我的单选按钮正常工作,但是面板在单击时会正常展开和收缩;我试图让他们仅在选中其单选按钮后才能展开。
我尝试禁用面板,但是禁用了面板内容,包括单选按钮。
我如何仅根据单选按钮的状态使其展开/折叠?
<mat-accordion hideToggle="true">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-radio-button
(change)="onChange($event)"
name="services"
id="service1"
value="service1"
>
<mat-panel-title> Service 1</mat-panel-title>
</mat-radio-button>
</mat-expansion-panel-header>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, possimus
aliquam sunt dolorem nam saepe esse laboriosam eius quae quaerat!
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-radio-button
(change)="onChange($event)"
name="services"
id="service2"
value="service2"
>
Service 2</mat-radio-button
>
</mat-expansion-panel-header>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, possimus
aliquam sunt dolorem nam saepe esse laboriosam eius quae quaerat!
</mat-expansion-panel>
</mat-accordion>
{{ selectedService }}
和组件:
selectedService = 'service1';
onChange(event) {
event.source.checked = true;
this.selectedService = event.source.value;
}
答案 0 :(得分:0)
您必须禁用mat-expansion-panel
(它仍然可以通过编程方式打开)。另外,您还必须修复某些CSS样式,因为单选按钮由于某种原因在单击时会向上移动。因此,让我们从样式开始:
.fix-radio-position .mat-expansion-panel
.mat-expansion-panel-header mat-panel-description
.mat-radio-button {
line-height: 2;
}
现在将css类应用于手风琴元素:
<mat-accordion class="fix-radio-position" hideToggle="true">
...
</mat-accordion>
您必须通过添加disabled
属性来禁用面板,并在每个模板上放置一个模板引用变量,以便我们可以通过单击单选按钮将它们作为参数传递:
<mat-expansion-panel #panel1 disabled>
...
</mat-expansion-panel>
<mat-expansion-panel #panel2 disabled>
...
</mat-expansion-panel>
稍微更改onChange
事件的签名,以便您可以将父面板作为参数传递:
<mat-radio-button (change)="onChange($event, panel1)">Service 1</mat-radio-button>
...
<mat-radio-button (change)="onChange($event, panel2)">Service 2</mat-radio-button>
最后,您的onChange
方法变为:
onChange(radio: MatRadioChange, panel: MatExpansionPanel) {
panel.open();
}