mat-table 以编程方式跳到特定行

Question

我正在通过 angular material 的 mat-table 组件实现 table。当我的代码中的某个事件被触发时，我想跳到特定的行。

到目前为止，我尝试在行和虚拟滚动中使用 (focus) 事件。

但我觉得我漏掉了一些东西，它应该比这更简单。

Answer 1

我发现 this question 并针对这些进行了一些更改，这将解决我的问题。
简而言之 - scrollIntoView - 我的代码附在下面，如果下次有人需要它的话。

//.tpl
<tr mat-row
          #matrow
          [attr.serialNumber] = row.serialNumber
          [ngClass]="{'selectedRow': selectedNode && selectedNode.serialNumber === row.serialNumber}"
          *matRowDef="let row; columns: displayedColumns;"
 ></tr>

// component.ts 
// selected point is your desierd element from data source
 scrollRowToView(selectedPoint) {
    const row = this.rows.find(r => 
    r.element.nativeElement.getAttribute('serialNumber') === selectedPoint.serialNumber);
    if (row != null) {
    row.element.nativeElement.scrollIntoView( {behavior: 'smooth', block: 'center', inline : 'center'});
 }

}

mat-table 以编程方式跳到特定行

mat-table skip to specific row programmatically

angular

angular-material-7

mat-table