帶子擴展面板的 Angular Material 擴展面板

Question

實際上我已經使用角材料擴展面板（手風琴）進行面板擴展。 所以我所嘗試的是我只想在這樣的一個父擴展面板中顯示子面板。 見下圖。

數據庫將成為頂級父面板，在其中我有不同的數據庫作為子面板。 為此，我編寫了這樣的代碼。 但是代碼不起作用意味着當我單擊子面板內的任何父面板時，一切都會折疊起來。 我的意思是說面板正在崩潰。 見下面的代碼：

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

我的計划是僅顯示該特定面板。 這很奇怪，它對我不起作用。 如果我將擴展面板放在單獨的面板中，那么為我工作。 有人可以建議我嗎？

Answer 1

從今天開始，你可以。 看到這個堆棧閃電戰

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

Answer 2

您可以首先擁有一個墊子手風琴，然后是一個墊子擴展面板“數據庫”，然后是該墊子擴展面板內的另一個 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>

Answer 3

mat-expansion-panel目前不支持 nesting 。 您可能應該改用mat-tree 。