时间戳

首页 > 解决方案 > 如何以编程方式扩展动态添加的垫子扩展面板？

angular - 如何以编程方式扩展动态添加的垫子扩展面板？

问题描述

我正在尝试使用 *ngFor 在 Mat-accordian 中显示多个 Mat-expansion-panel。我需要在单击我能够执行的按钮时添加一个新的 mat-expansion-panel。我还需要在单击按钮时展开（打开）这个新添加的扩展面板，这是我无法实现的。请帮忙。

Stackblitz - https://stackblitz.com/edit/angular-fh5vu1-g6phe6?file=app%2Fexpansion-steps-example.ts

export class ExpansionStepsExample { 
  items: number[] = [1,2,3];

  AddNewRow() {
    this.items.push(4);
  }
}

<mat-accordion class="example-headers-align">
  <mat-expansion-panel *ngFor="let item of items;">
    <mat-expansion-panel-header>
      <mat-panel-title> {{item}} </mat-panel-title>
    </mat-expansion-panel-header>
    {{item}}
  </mat-expansion-panel>
</mat-accordion>
<button (click)="AddNewRow()" value="Add New"> Add New </button>

标签： angularangular-material

解决方案

您可以访问材质扩展面板元素，并调用方法 open() 和 close()。

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatExpansionPanel } from '@angular/material';
...
@ViewChild(MatExpansionPanel, {static: true}) matExpansionPanelElement: MatExpansionPanel;
...
selectItem() {
    this.matExpansionPanelElement.close(); //open()
}
<mat-accordion>
    <mat-expansion-panel #matExpansionPanel>
    ...
    </mat-expansion-panel>
</mat-accordion>

推荐阅读