Разверните строку таблицы расширения Angular Material с помощью TypeScript

Question

Я использую данные о расширении 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 ЗДЕСЬ

DEMO: