通过按钮以编程方式打开和关闭展开的行

Question

根据此示例，我创建了带有扩展行的表：

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

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

例如：

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

def function(row,start,stake_size):
    # Your conditions...
    return row

我被困在那一刻，我不知道该怎么办。

Answer 1

我认为没有一个干净的解决方案，因为您可以看到here那里有一些棘手的解决方法。

我修改了您的堆栈here，我认为它可以复制您尝试做的很好的事情。

在模板中，您需要在单元格上的click事件上调用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">

Answer 2

您只需将元素引用传递给函数

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

然后执行以下操作：

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

当然，您的展开式详细信息应如下所示：

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