通过 TypeScript 展开 Angular Material 展开表行答案

【问题标题】：Expand Angular Material expansion table row via TypeScript通过 TypeScript 展开 Angular Material 展开表行
【发布时间】：2019-01-04 18:13:59
【问题描述】：

我正在使用从文档 here 修改的 Angular Material 扩展数据表。进行更改时，我会刷新表中的数据。这可以正常工作，但刷新后表格会完全折叠到其默认状态，从而产生不良的用户体验。

我想在刷新后强制之前打开的行展开。无论如何，我还没有找到强制扩展 TypeScript 中的行。下面是我在发生表刷新时调用的方法：

  refresh() {
    this.refreshDatatable();
    // I want to forcefully open the previously expanded row HERE.
  }

任何帮助将不胜感激！

【问题讨论】：

您可以将打开的选项卡的索引保留在属性currentOpenTab 中（例如）并在数据更改后重新打开它。
@Baruch 这正是我想要做的。我可以轻松抓取索引，我只是不知道如何展开面板。我通过expandedElement 变量获取行没有问题。我假设我需要将 [@detailExpand] 设置为“扩展”，但我不知道在模板中存在的 TypeScript 中如何。

标签： angular typescript angular-material angular-datatables

【解决方案1】：

这是一个允许您扩展默认表格行的示例。我希望这能帮到您。您只需从之前在数据列表中打开的选项卡中检索索引。

TS：

export class TableExpandableRowsExample implements OnInit {
  dataSource = ELEMENT_DATA;
  columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
  expandedElement: PeriodicElement | null;

  ngOnInit() {
    this.expandedElement = ELEMENT_DATA[2];
  }
}

HTML：

<ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
    <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
      <div class="example-element-diagram">
        <div class="example-element-position"> {{element.position}} </div>
        <div class="example-element-symbol"> {{element.symbol}} </div>
        <div class="example-element-name"> {{element.name}} </div>
        <div class="example-element-weight"> {{element.weight}} </div>
      </div>
      <div class="example-element-description">
        {{element.description}}
        <span class="example-element-description-attribution"> -- Wikipedia </span>
      </div>
    </div>
  </td>
</ng-container>

StackBlitz HERE

演示：

【讨论】：

好的，这行得通。我不小心尝试执行 this.expandedElement = this.expandedElementCopy。这不起作用，因为它不是深层副本。感谢您的帮助！