Question

我正在尝试通过使用* ngFor在Mat-accordian中显示多个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>

Answer 1

您可以访问Material Expansion Panel元素，并调用open（）和close（）方法。

 struct B
 {
      B() : a() {};    

      void some_member(some_type arg)
      {
          a.some_member(arg);      // assume A has this member that accepts these arguments
      }

      private:

         A a;
 };

struct A

Answer 2

我建议更改您的数据模型。这样，您可以存储打开和关闭的状态以及每个项目的数量。

item = [
  {
    number: 1, 
    open: false
  },
  {
    number: 2,
    open: true
  }
];

  AddNewRow() {
     this.item.push({number: 3, open: true});
   }

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

Answer 3

@sem对答案的微小更改对于Angular 9+使用： component.ts

@ViewChild('matExpansionPanel', { static: true }) matExpansionPanelElement: MatExpansionPanel;

component.html

<mat-expansion-panel #matExpansionPanel>

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

3 个答案: