как получить обновленную ссылку Viewchildren после сортировки в угловых MatTable - PullRequest
Новая
       10

как получить обновленную ссылку Viewchildren после сортировки в угловых MatTable

0 голосов
/ 21 января 2019

Я работаю над таблицей угловых материалов и хочу получить ссылку на tableRow, используя ViewChildren и ViewContainerRef.

Здесь фрагмент HTML

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

иФрагмент TS

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

Я могу получить ссылку на строки таблицы, но проблема в том, что при сортировке я не могу получить обновленную ссылку на DOM в rowContainers переменных.

Я не смог найти способ обновить rowContainers переменную.

Кто-нибудь знает, как обновить ViewChildren переменную?

Вы можете увидеть поведение в stackblitz .

1 Ответ

0 голосов
/ 21 января 2019

Полагаю, вам нужен первый элемент массива, а не 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;
  }

Update2 Если у нас есть таблица как 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;
  }

Ваш разветвленный стекблиц

...