如何在 angular MatTable 中排序后获取更新的 Viewchildren 参考

Question

我正在研究 angular material table 并希望使用 ViewChildren 和 ViewContainerRef.

获取 table 行引用

此处Html代码段

<tr mat-row *matRowDef="let row; columns: displayedColumns;" #tableRows ></tr>

和 TS 片段

@ViewChildren('tableRows', {read: ViewContainerRef}) rowContainers

我能够获得 table 行参考，但问题是当我排序时，我无法在 rowContainers 变量中获得更新的 DOM 参考。

我找不到任何方法来刷新 rowContainers 变量。

有人知道如何刷新 ViewChildren 变量吗？

您可以在 stackblitz 中看到行为。

Answer 1

我猜你想要数组的第一个元素，而不是 ViewChildren。订阅 rowContainers.changes，不起作用，但是，当您使用 MatTableDataSource 时，您总是可以使用它的方法 _orderData（需要一个元素数组），例如，您可以写一些像

let orderData=this.dataSource._orderData(this.dataSource.data)
console.log(orderData[0])

更新如果我们想要订购 ViewChildren，我们需要将 viewChildren 传递给数组，对数组进行排序并进行重置。如果我们的 viewChildren 是 "ViewContainerRef"

@ViewChildren('tableRows', {read: ViewContainerRef}) rowContainers: QueryList<any>
//We can access to the content using, e.g.
 rowContainers.first.element.nativeElement.textContent;

如果我们的ViewChildren是"ElementRef"

@ViewChildren('tableRows', {read: ElementRef}) rowContainers: QueryList<any>
//We can access to the content using, e.g.
 rowContainers.first.nativeElement.textContent;

所以，当我们点击时

  rowClick(table:any) {
    //get the order data
    const orderData=this.dataSource._orderData(this.dataSource.data);
    //convert rowContainers to array
    const array=this.rowContainers.toArray();
    //sort the array
    array.sort((a,b)=>{
      //the content of "a" and "b"
      //e.g. will be " 3 Lithium 6.941 Li"
      let contentA=a.element.nativeElement.textContent;
      let contentB=b.element.nativeElement.textContent;
      //get the index in our orderData
      let indexA=orderData.findIndex(d=>''+d.position==contentA.split(' ')[1])
      let indexB=orderData.findIndex(d=>''+d.position==contentB.split(' ')[1])
      //return 0 if equal, 1 if greater, -1 if less
      return indexA==indexB?0:indexA>indexB?1:-1;
    })
    //make a reset
    this.rowContainers.reset(array);
    console.log(this.rowContainers.first.element.nativeElement.textContent);
    this.firstElement = this.rowContainers.first;
  }

更新2 如果我们有 table 作为 ViewChild

@ViewChild(MatTable, {read:ElementRef}) table

我们可以使用它nativeElement.textContent，所以

  rowClick(table:any) {
    const array=this.rowContainers.toArray();

    //using context the table
    const tableArray=this.table.nativeElement.textContent.split(' ')
    let order:any[]=[]

    for (let i=9;i<tableArray.length;i+=8)
       order.push(tableArray[i])

    array.sort((a,b)=>{
      let contentA=a.element.nativeElement.textContent;
      let contentB=b.element.nativeElement.textContent;
      let indexA=order.findIndex(d=>d==contentA.split(' ')[1])
      let indexB=order.findIndex(d=>d==contentB.split(' ')[1])
      return indexA==indexB?0:indexA>indexB?1:-1;
    })
    this.rowContainers.reset(array);
    console.log(this.rowContainers.first.element.nativeElement.textContent);
    this.firstElement = this.rowContainers.first;
  }

你的forked stackblitz

如何在 angular MatTable 中排序后获取更新的 Viewchildren 参考

how to get updated Viewchildren reference after sorting in angular MatTable

sorting

angular-material

angular

mat-table