通过TypeScript扩展Angular Material扩展表行

Question

我使用的是我根据文档here修改的Angular Material扩展数据表。进行更改后，我会刷新表中的数据。效果很好，但是刷新后表完全折叠到其默认状态，从而产生了不良的用户体验。

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

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

任何帮助将不胜感激！

Answer 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

演示：