使用按钮以编程方式打开和关闭展开的行答案

【问题标题】：Programatically open and close an expanded row with a button使用按钮以编程方式打开和关闭展开的行
【发布时间】：2019-01-08 13:23:36
【问题描述】：

我根据这个例子创建了一个带有扩展行的表：

https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Fcdk-detail-row.directive.ts

我想在按钮（图标 arrow_down、arrow_up）上展开和关闭行，而不是单击所有行。

例如：

当我点击行中的图标时，它会展开或关闭

    <ng-container matColumnDef="arrow">
      <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
      <mat-cell *matCellDef="let element">   
        <i class="material-icons" 
           (click)="onToggle()" >
          keyboard_arrow_down
        </i> 
      </mat-cell>
    </ng-container>

我被困在那个点上，我不知道该怎么办..

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我不认为有一个干净的解决方案，正如你所看到的 here 有一些 hacky 解决方法。

我修改了您的 stackblitz here，我认为它很好地复制了您正在尝试做的事情。

在模板中，您需要在单元格的点击事件上调用stopPropagation：

<mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">

图标是根据我添加的数据模型 (state) 上的附加属性设置的：

{{element.state === 'expanded' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}

行是否展开也取决于该属性：

<div class="mat-row detail-row" [@detailExpand]="element.state" style="overflow: hidden">

【讨论】：

【解决方案2】：

你可以只将元素引用传递给函数

(click)="onToggle(element,i)"

然后这样做：

onToggle(element: YourDataObject, index) {
    this.expandedElement = this.expandedElement == element ? null : element;
}

当然，您的可展开细节应该是这样的：

[@detailExpand]="row == expandedElement ? 'expanded' : 'collapsed'"

【讨论】：