[英]Angular Material Expansion panel with sub expansion panels
实际上我已经使用角材料扩展面板(手风琴)进行面板扩展。 所以我所尝试的是我只想在这样的一个父扩展面板中显示子面板。 见下图。
数据库将成为顶级父面板,在其中我有不同的数据库作为子面板。 为此,我编写了这样的代码。 但是代码不起作用意味着当我单击子面板内的任何父面板时,一切都会折叠起来。 我的意思是说面板正在崩溃。 见下面的代码:
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Databases
</mat-panel-title>
</mat-expansion-panel-header>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
MySQL
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
Oracle
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
Postgres
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
SQLServer
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
MongoDB
</mat-panel-title>
</mat-expansion-panel-header>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Assertions"></textarea>
</mat-form-field>
</mat-expansion-panel>
</mat-expansion-panel>
</mat-accordion>
我的计划是仅显示该特定面板。 这很奇怪,它对我不起作用。 如果我将扩展面板放在单独的面板中,那么为我工作。 有人可以建议我吗?
从今天开始,你可以。 看到这个堆栈闪电战
<!-- level 01 -->
<mat-accordion>
<mat-expansion-panel
(opened)="panelOpenState = true"
(closed)="panelOpenState = false"
>
<mat-expansion-panel-header>
<mat-panel-title>Week 01</mat-panel-title>
<mat-panel-description>1 entry</mat-panel-description>
</mat-expansion-panel-header>
<mat-accordion>
<mat-expansion-panel
(opened)="panelOpenState = true"
(closed)="panelOpenState = false"
>
<mat-expansion-panel-header>
<mat-panel-title>Day 01</mat-panel-title>
<mat-panel-description>Temperature warning</mat-panel-description>
</mat-expansion-panel-header>
<p>On day #1 of the 1nd week an alarm was raised</p>
</mat-expansion-panel>
</mat-accordion>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Week 02</mat-panel-title>
<mat-panel-description>2 entries</mat-panel-description>
</mat-expansion-panel-header>
<!-- level 02 -->
<mat-accordion>
<mat-expansion-panel
(opened)="panelOpenState = true"
(closed)="panelOpenState = false"
>
<mat-expansion-panel-header>
<mat-panel-title>Day 01</mat-panel-title>
<mat-panel-description>Production success</mat-panel-description>
</mat-expansion-panel-header>
<p>On day #1 of the 2nd week The production was successful!</p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Day 02</mat-panel-title>
<mat-panel-description>2 entries</mat-panel-description>
</mat-expansion-panel-header>
<!-- level 03 -->
<mat-accordion>
<mat-expansion-panel
(opened)="panelOpenState = true"
(closed)="panelOpenState = false"
>
<mat-expansion-panel-header>
<mat-panel-title>03:00</mat-panel-title>
<mat-panel-description>Alarm</mat-panel-description>
</mat-expansion-panel-header>
<p>On day two at 3am was an alarm</p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>10:00</mat-panel-title>
<mat-panel-description>Info</mat-panel-description>
</mat-expansion-panel-header>
<p>Delievery was successfull</p>
</mat-expansion-panel>
</mat-accordion>
</mat-expansion-panel>
</mat-accordion>
</mat-expansion-panel>
</mat-accordion>
您可以首先拥有一个垫子手风琴,然后是一个垫子扩展面板“数据库”,然后是该垫子扩展面板内的另一个 div。 这个 div 包含多个 mat-expansion 面板,如 "MySql" 、 "Oracle" 等。
这里:
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Databases
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
MySQL
</mat-panel-title>
</mat-expansion-panel-header>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Oracle
</mat-panel-title>
</mat-expansion-panel-header>
</mat-expansion-panel>
</div>
</mat-expansion-panel>
</mat-accordion>
mat-expansion-panel目前不支持 nesting 。 您可能应该改用mat-tree 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.