带有子扩展面板的角材料扩展面板

时间：2018-07-24 13:16:39

标签： angular angular-material2 angular-material-5

实际上，我使用角材扩展面板（附件）进行面板扩展。所以我尝试的是我只想在一个父级扩展面板中显示子面板，就像这样。参见下面的图片。

enter image description here

数据库将成为顶级父面板，在它内部，我具有与子面板不同的数据库。为此，我编写了这样的代码。但是代码不起作用意味着当我单击子面板中的任何父面板时，一切都折叠了。我的意思是说面板正在崩溃。 参见下面的代码：

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

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

3 个答案:

答案 0 :(得分：2)

首先可以有一个mat-accordian，然后是一个mat-expansion-panel“数据库”，然后是那个mat-expansion面板中的另一个div。该div包含多个扩展垫面板，例如“ 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>

答案 1 :(得分：1)

mat-expansion-panel does not currently support nesting。 您可能应该改用mat-tree。

答案 2 :(得分：1)

到目前为止，您可以。 see this 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>
相关问题
最新问题