how to focus or active mat-expansion-panel which is in ngfor

拥有回忆 提交于 2021-01-07 01:32:36

问题


        <mat-accordion class="gl-w-100" *ngFor="let item of myObj;let i=index">
      <mat-expansion-panel class="gl-w-100 gl-mb-20p" [expanded]="step===i" (opened)="step=i" hideToggle>
          **<mat-expansion-panel-header [collapsedHeight]="'60px'" class="disable_ripple gl-w-100" tabindex="i" [class.focus]="step==i">**
              <div class="gl-w-100 gl-d-flex gl-fd-row gl-justify-sb gl-px-10">
                  <!-- <span class="icon-faq gl-fs-25 gl-mr-15"></span> -->
                  <mat-panel-title class="gl-ff-Poppins gl-fs-14 gl-lh-59">{{item.Heading}}</mat-panel-title>
                  <mat-icon *ngIf="step!=i" class="gl-m-auto icon">add</mat-icon>
                  <mat-icon *ngIf="step==i" class="gl-m-auto icon">minimize</mat-icon>
              </div>
          </mat-expansion-panel-header>
          <div class="gl-po-rel gl-w-100 gl-d-flex gl-fd-row gl-pb-20">
              <div class="gl-w-100 gl-po-rel gl-fd-column">
                  <div class="gl-mt-20">
                      <mat-panel-description class="gl-w-100 gl-px-50 gl-xl-px-50 gl-lg-px-30 gl-sm-px-20 gl-po-rel">
                          <div class="gl-ff-Poppins gl-lg-fs-12 gl-lg-lh-16 gl-fs-15 gl-lh-30 gl-fw-300 gl-md-lh-25 gl-ta-j">{{item.Description}}</div>
                      </mat-panel-description>
                  </div>
              </div>
          </div>
      </mat-expansion-panel>
  </mat-accordion>

I want

  1. initially open a expansion panel and make focused.
  2. when it opened change expansion indicator as + and when closed indicator become -

how to change this code ?

来源:https://stackoverflow.com/questions/64931255/how-to-focus-or-active-mat-expansion-panel-which-is-in-ngfor

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!