单击垫图标按钮时可扩展垫-table

Question

我在我的 mat-table:

中实现了以下功能（展开行详细信息，当您单击该行时它会打开其详细信息）

https://stackblitz.com/edit/angular-material2-issue-wervgn?file=app%2Ftable-basic-example.html

但这是在我点击该行的任何地方打开详细信息 div。我想 expend/open 仅在垫子图标 expand_more/expand_less 单击时向上或折叠。

我尝试在单击按钮时调用 onToggleChange，但没有成功。

如果有人可以帮助我。

暂时谢谢。

Answer 1

我编辑了您的示例，我认为我实现了预期的行为。基本上我使用 ViewChildren 视图查询来获取所有详细信息行指令实例，并在单击图标时调用切换功能。 看看：https://stackblitz.com/edit/angular-material2-issue-asu1zv?file=app%2Fcdk-detail-row.directive.ts

Answer 2

上面的答案非常有效，它只是错过了在打开新行时关闭上一个打开行的逻辑。

您可以通过遍历视图查询并在当前打开的每一行上触发 onToggleChange 来轻松实现此目的。

像这样：

  expand(element: any) {
    for (let i = 0; i < this.detailRows.length; i++) {
      const openedRow = this.detailRows.find(x => x.row == i)
      if (openedRow?.expended) {
        this.onToggleChange(openedRow?.row);
      }
    }

    const detail = this.detailRows.find(x => x.row == element);
    detail?.toggle();
  }