如何在angular MatTable中排序后获得更新的Viewchildren引用

我正在处理angular material table，希望使用

ViewChildren

和

ViewContainerRef

获取tableRow参考

这里是Html代码片段

和TS片段

@ViewChildren（'tableRows'，{read:ViewContainerRef}）行容器

我能够获取表行引用，但问题是在排序时，我无法在

rowContainers

变量中获取更新的DOM引用

我找不到任何方法刷新

行容器

变量

有人知道如何刷新

ViewChildren

变量吗

---

您可以在中看到行为。

我建议您使用数组的第一个元素，而不是ViewChildren。 Susbcribe to rowContainers.changes，不起作用，但是，当您使用MatTableDataSource时，您始终可以使用其Method _orderData（需要元素数组），例如，您可以编写类似的

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

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

更新2 如果我们将表作为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;
  }

行单击（表：任意）{
常量数组=this.rowContainers.toArray（）；
//在表中使用上下文
const tableArray=this.table.nativeElement.textContent.split（“”）
下单：任意[]=[]
for（设i=9；i{
设contentA=a.element.nativeElement.textContent；
让contentB=b.element.nativeElement.textContent；
设indexA=order.findIndex（d=>d==contentA.split（“”）[1]）
设indexB=order.findIndex（d=>d==contentB.split（“”）[1]）
返回indexA==indexB？0:indexA>indexB？1:-1；
})
此.rowContainers.reset（数组）；
log（this.rowContainers.first.element.nativeElement.textContent）；
this.firstElement=this.rowContainers.first；
}

---

您的

通常您可以订阅由

@ViewChildren

生成的

查询列表

的

更改

可观察内容，该列表一旦更改，就会发出更改，但这似乎不起作用，因为它会发出无序的行列表。不，我不需要数据。我需要使用ViewChildren更新的dom引用。若要“重新排序”ViewChildren，请首先传递到数组，对数组重新排序，然后使用reset:myArray=myQueryList.toArray（）；。。重新排序数组。。；myQueryList.reset（myArray）如果需要，例如向第一个元素添加一个类，可以获取第一个元素并使用[ngStyle]或[style.attribute]我尝试了重置方法，但没有成功。我更新了stackblitz。谢谢，虽然你的解决方案是有效的…但我在想，如果它只能由AngularAPI完成。

  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;
  }

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

  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;
  }