黄兵的个人博客

mat-expansion-panel *ngfor [ngClass]的处理

最近在使用Angular Material 的<mat-expansion-panel>展示数据，使用*ngFor批量显示数据，但是在点击展开面板的时候，低下所有的<mat-expansion-panel>都使用了相同的样式，这样肯定不是我要的结果。

下面是示例代码：

<mat-accordion *ngFor="let item of sub">
  <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <div class="index" [ngClass]="{'open-index':panelOpenState}">1</div>
      </mat-panel-title>
      <mat-panel-description>
        <div class="details-wrap">
          <div class="details">
            <div class="details-top">
              <div class="title">
                <span [ngClass]="{'title-open-style':panelOpenState}">{{item.smsNumber}}</span>
              </div>
            </div>
            <div class="details-bottom">
              <div class="subtitles-text-wrapper" [ngClass]="panelOpenState?'hidden':'visible'">
                <div class="summary-text">
                  <span>{{item.smsContent}}</span>
                </div>
              </div>
              <div class="subtitles-overlap" *ngIf="panelOpenState">
                <time>{{item.date}}{{item.time}}</time>
              </div>
            </div>
          </div>
          <div class="last-time" *ngIf="!panelOpenState">
            <div class="last-time-date">
              {{item.date}}
            </div>
            <div class="text">{{item.time}}</div>
          </div>
        </div>
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div class="feed-item-body">
      <div class="chips-list border-separator">
        <div class="small-title">Text message content</div>
        <div class="sms-content">
          <p>{{item.smsContent}}</p>
        </div>
      </div>
    </div>
    <mat-action-row>
      <button mat-button color="primary" class="mat-button-override" (click)="copyText()">Copy</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

当你点击任意一个的时候，其他也会受到影响。

修改代码如下：

<mat-accordion *ngFor="let item of sub;let i=index">
  <mat-expansion-panel (opened)="setOpened(i)" (closed)="setClosed(i)"
                       [ngClass]="currentlyOpenedItemIndex === i?'expanded-item':'contracted-item'">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <div class="index" [ngClass]="{'open-index':currentlyOpenedItemIndex === i}">{{i + 1}}</div>
      </mat-panel-title>
      <mat-panel-description>
        <div class="details-wrap">
          <div class="details">
            <div class="details-top">
              <div class="title">
                <span
                  [ngClass]="{'title-open-style':currentlyOpenedItemIndex === i}">{{item.smsNumber}}</span>
              </div>
            </div>
            <div class="details-bottom">
              <div class="subtitles-text-wrapper"
                   [ngClass]="currentlyOpenedItemIndex === i?'hidden':'visible'">
                <div class="summary-text">
                  <span>{{item.smsContent}}</span>
                </div>
              </div>
              <div class="subtitles-overlap" *ngIf="currentlyOpenedItemIndex === i">
                <time>{{item.date}}{{item.time}}</time>
              </div>
            </div>
          </div>
          <div class="last-time" *ngIf="currentlyOpenedItemIndex != i">
            <div class="last-time-date">
              {{item.date}}
            </div>
            <div class="text">{{item.time}}</div>
          </div>
        </div>
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div class="feed-item-body">
      <div class="chips-list border-separator">
        <div class="small-title">Text message content</div>
        <div class="sms-content">
          <p>{{item.smsContent}}</p>
        </div>
      </div>
    </div>
    <mat-action-row>
      <button mat-button color="primary" class="mat-button-override" (click)="copyText(item.smsContent)">
        Copy
      </button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

这里通过索引来判断到底是点击的那个，并应用相应的样式。

Typescript代码如下：

export class ContentComponent {
  currentlyOpenedItemIndex = -1;


  constructor() {
  }

  setOpened(itemIndex) {
    this.currentlyOpenedItemIndex = itemIndex;
  }

  setClosed(itemIndex) {
    if (this.currentlyOpenedItemIndex === itemIndex) {
      this.currentlyOpenedItemIndex = -1;
    }
  }
}

这里有一个在线示例：https://stackblitz.com/edit/angular-expansion-panel-toggle-header

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - mat-expansion-panel *ngfor [ngClass]的处理