堆栈内存溢出
  简体   繁体   English

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

[英]Angular Material Expansion panel with sub expansion panels

 原文  2018-07-24 13:16:39  8   3    angular/ angular-material2/ angular-material-5

问题描述

Actually i have used angular material expansion panel (accordian) for panel expansions.实际上我已经使用角材料扩展面板（手风琴）进行面板扩展。 So what i have tried is i just want to display child panels inside one parent expansion panel something like this.所以我所尝试的是我只想在这样的一个父扩展面板中显示子面板。 See picture below.见下图。

在此处输入图片说明

Databases is going to be the top level parent panel and inside of it i have different databases as child panels.数据库将成为顶级父面板，在其中我有不同的数据库作为子面板。 For that i have written the code like this.为此，我编写了这样的代码。 But the code is not working means when i click on any parent panel inside child panel then everything gets collapsed.但是代码不起作用意味着当我单击子面板内的任何父面板时，一切都会折叠起来。 I mean to say the panels are collapsing.我的意思是说面板正在崩溃。 See code below:见下面的代码：

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

My plan is to display only that particular panel only.我的计划是仅显示该特定面板。 This is very strange its not working for me.这很奇怪，它对我不起作用。 If i place expansion panels in seperate panels then working for me.如果我将扩展面板放在单独的面板中，那么为我工作。 Can anybody suggest me?有人可以建议我吗？

3 个解决方案

解决方案1
 4  2019-09-20 01:14:45

As of today, you can.从今天开始，你可以。 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>

解决方案2
 4  2020-01-25 17:11:06

You can first have a mat-accordian, then one mat-expansion-panel "Databases" and then another div inside that mat-expansion panel.您可以首先拥有一个垫子手风琴，然后是一个垫子扩展面板“数据库”，然后是该垫子扩展面板内的另一个 div。 This div contains multiple mat-expansion panels such as "MySql" , "Oracle" etc.这个 div 包含多个 mat-expansion 面板，如 "MySql" 、 "Oracle" 等。

Here:这里：

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

解决方案3
 0  2018-07-24 13:41:34

mat-expansion-panel does not currently support nesting . mat-expansion-panel目前不支持 nesting 。 You should probably use mat-tree instead.您可能应该改用mat-tree 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular 7 Material 扩展面板闪烁 - Angular 7 Material Expansion Panel flicker Angular材质扩展板Alignment - Alignment in Expansion Panel of Angular Material Angular 中使用 Material 的可移动扩展面板 - Movable Expansion-Panel in Angular using Material 在Angular材质扩展面板中更改布局 - Change Layout in Angular Material Expansion Panel 如何禁用 Angular Material Expansion Panel 动画？ - How to disable Angular Material Expansion Panel animations? 垂直打开角度材料扩展面板 - Opening angular material expansion panel vertically 如何以编程方式切换 Angular 材质扩展面板 - How to toggle Angular material expansion panel programmatically Angular Material Expansion Panel Wrapper 问题 - Angular Material Expansion Panel Wrapper issue Angular Material Expansion Panel 延迟渲染 - Angular Material Expansion Panel lazy rendering 材料角4的扩展面板 - Expansion-panel from material angular 4
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM