带有子扩展面板的Angular Material扩展面板

Question

实际上，我已经使用了 Angular Material 扩展面板（手风琴）进行面板扩展。所以我的尝试是想在一个父级扩展面板中显示子面板，就像下面的图片一样。

数据库将是顶级父面板，里面有不同的数据库作为子面板。我已经编写了以下代码。但是代码无法正常工作，这意味着当我单击任何子面板内的父面板时，所有内容都会折叠。我的意思是面板正在折叠。 请参见以下代码：

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

我的计划是仅显示特定的面板。这很奇怪，对我来说不起作用。如果我将扩展面板放在单独的面板中，则可以正常工作。有人能给我建议吗？

- youi

Answer 1

您可以首先使用 mat-accordian，然后是一个名为“数据库”的 mat-expansion-panel，再在该 mat-expansion-panel 内部添加另一个 div。该 div 包含多个 mat-expansion-panel，例如“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>

- Deep Dhillon

Answer 2

截至今天，您可以查看这个 StackBlitz。

 <!-- 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>

- Mathieu

---

这很棒。有没有办法制作多列？ - JayC

Answer 3

mat-expansion-panel 目前不支持嵌套。 建议使用mat-tree代替。

- AzaDee