Angular 通过TypeScript展开角度材质展开表行

Angular 通过TypeScript展开角度材质展开表行,angular,typescript,angular-material,angular-datatables,Angular,Typescript,Angular Material,Angular Datatables,我使用的是从文档中修改的角度材质展开数据表。我在进行更改时刷新表中的数据。这可以正常工作,但在刷新后,表会完全折叠到其默认状态,从而产生不需要的用户体验 我想在刷新后强制展开以前打开的行。我还没有找到从TypeScript强制展开行的方法。下面是我在刷新表时调用的方法: refresh() { this.refreshDatatable(); // I want to forcefully open the previously expanded row HERE. }

我使用的是从文档中修改的角度材质展开数据表。我在进行更改时刷新表中的数据。这可以正常工作,但在刷新后,表会完全折叠到其默认状态,从而产生不需要的用户体验

我想在刷新后强制展开以前打开的行。我还没有找到从TypeScript强制展开行的方法。下面是我在刷新表时调用的方法:

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

任何帮助都将不胜感激

下面是一个允许您扩展默认表行的示例。 我希望这对你有帮助。 您只需要从以前在数据列表中打开的选项卡中检索索引

TS:

HTML:


{{element.position}
{{element.symbol}
{{element.name}
{{element.weight}}
{{element.description}
--维基百科

演示:


您可以将打开选项卡的索引保留在属性
currentOpenTab
(例如)中,并在数据更改后重新打开它。@Baruch这正是我要做的。我可以很容易地获取索引,我只是不知道如何扩展面板。通过expandedElement变量获取行没有问题。我假设我需要将[@detailExpand]设置为“expanded”,但我不知道在TypeScript中是如何设置的,因为它存在于模板中。好的,这是可行的。我无意中尝试执行此操作。expandedElement=此。expandedElementCopy。这不起作用,因为它不是深度复制。谢谢你的帮助!
export class TableExpandableRowsExample implements OnInit {
  dataSource = ELEMENT_DATA;
  columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
  expandedElement: PeriodicElement | null;

  ngOnInit() {
    this.expandedElement = ELEMENT_DATA[2];
  }
}
<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>