Angular 5表格行一次展开/收起一个

Question

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

尝试下面的网址，但它似乎无法正常工作。任何帮助表示赞赏。 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

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

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