[英]Angular Material Accordion open/close based on Radio button value
我正在尝试使用带有一组单选按钮的mat-accordion
,每个面板一个。 如果选择了单选按钮,请展开该面板,关闭其他面板并按预期取消选择其他单选。
我的单选按钮按预期工作,但面板在点击时正常展开和收缩; 我试图让他们仅在选中他们的单选按钮时才展开。
我尝试禁用面板,但这会禁用其内容,包括单选按钮。
我怎样才能让它仅根据其单选按钮 state 展开/折叠?
<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;
}
您必须禁用mat-expansion-panel
(它仍然可以以编程方式打开)。 此外,您必须修复一些 CSS 样式,因为由于某种原因,当您单击单选按钮时,它会向上移动。 那么让我们从styles开始吧:
.fix-radio-position .mat-expansion-panel
.mat-expansion-panel-header mat-panel-description
.mat-radio-button {
line-height: 2;
}
现在将 css class 应用于手风琴元素:
<mat-accordion class="fix-radio-position" hideToggle="true">
...
</mat-accordion>
您必须通过添加disabled
属性来禁用面板,并在每个面板上放置一个模板引用变量,以便我们可以通过单击单选按钮将它们作为 arguments 传递:
<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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.