web-dev-qa-db-fra.com

Angular Material open-mat-expansion-panel open event renvoie toujours undefined

Comme vous le savez peut-être de angular matériaux, mat-expansion-panel ont @Output nommé "open", qui est émis lorsque l'élément d'accordéon est ouvert. Je veux pour capturer cet événement ouvert et identifier le panneau qui a été ouvert. Mais ce code simple (ci-dessous) renvoie toujours uniquement indéfini. Qu'est-ce que j'ai fait de mal?.

component.html 

<mat-accordion multi>
  <mat-expansion-panel (opened)="openGroup($event)" *ngFor="let element of Data">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <ul class="nav-tabs">
          <li class="col-xs-3">{{element.param1}}</li>
          <li class="col-xs-5">{{element.param2}}</li>
          <li class="col-xs-3">{{element.param3}}</li>
        </ul>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <div>
      <p>{{element.content}}</p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

component.ts 

Data = [
  // This returns from backend, this is only for show that the Data is not empty
  { /* some data here*/ },
  { /* some data here*/ },
  { /* some data here*/ }
];

openGroup(e) {
  console.log(e);
}
angularangular5angular-material2
7
Andy Infin

C'est par conception; le site docs spécifie que le type de l'événement opened est void, donc l'événement ne contient rien. Si vous souhaitez avoir le même gestionnaire d'événements pour plusieurs panneaux d'extension, vous pouvez utiliser quelque chose comme ceci:

<mat-expansion-panel (opened)="openGroup('expansion1')"></mat-expansion-panel>
<mat-expansion-panel (opened)="openGroup('expansion2')"></mat-expansion-panel>

ou, peut-être mieux pour votre cas:

<mat-expansion-panel *ngFor="let element of Data" (opened)="openGroup(element.someProp)">
6
p4r1