angular - Angular 5表格行一次展开/折叠一个

Question

尝试一次展开/折叠一个角表行，但无法使其工作。

在下面的 url 下试过，但它似乎不起作用。任何帮助表示赞赏。 https://plnkr.co/edit/rLtjjMOpEUe8owK8KI2M?p=preview https://github.com/angular/material2/issues/6095

 <mat-row *matRowDef="let row; columns: displayedColumns;"
           matRipple
           class="element-row"
           [class.expanded]="expandedElement == row"
           (click)="expandedElement = row">
   </mat-row>

   <mat-row *matRowDef="let row; columns: row; columns: ['expandedDetail']; when: isExpansionDetailRow"

      (click)="getMetadata(row.description, row.capability_id)"
         class="element-row"
                 [matDetailRow]="row" [matDetailRowTpl]="tpl">
    </mat-row>

</mat-table>

<ng-template #tpl let-element>
    <div [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'" style="overflow: hidden">
      <div *ngFor='let team of metadata | async'>
      <ul>
        <li>Team Lead:  {{team.team_lead}}</li>
      </ul>
     </div>     
    </div>
  </ng-template>

  In Component:
  isExpansionDetailRow = (i: number, row: any) => 
          row.hasOwnProperty('detailRow');

Answer 1

尝试在展开之前折叠所有行。并展开选定的行，下面的代码将帮助您处理您的适合。

toggleExpandRow(row) {
        // console.log('Toggled Expand Row!', row);
        this.table.rowDetail.collapseAllRows();
        this.table.rowDetail.toggleExpandRow(row);
      }