Угловой материал различный коврик на нескольких столах

Question

Нет проблем с раздельным / четким разбиением на страницы на нескольких таблицах материалов в Augular. Но сортировка отдельных таблиц на странице не так проста, как кажется.

Может кто-нибудь указать нам рабочий пример сортировки нескольких таблиц с использованием компонента таблицы Material Angular (ver 4-5).

Благодарю вас

Answer 1

После долгих поисков я наконец-то нашел решение вашей проблемы, а также полное разрешение и ссылку на то, где я нашел определенные фрагменты. Надеюсь, что это работает для вас, как это, наконец, работает для меня.

import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';

@Component({
  templateUrl: './my-tables.component.html'
})
export class CopyInstructionsComponent implements AfterViewInit {
  public myFirstTableData: MatTableDataSource<MyTableModel>;
  public mySecondTableData: MatTableDataSource<MyTableModel>;
  @ViewChild('firstTableSort') public firstTableSort: MatSort;
  @ViewChild('secondTableSort') public secondTableSort: MatSort;
  
  constructor(private cdRef: ChangeDetectorRef) {
    // ...the rest of your code here to build the data structures.
  }
  
  ngAfterViewInit() {
    this.myFirstTableData.sort = this.firstTableSort;
    this.mySecondTableData.sort = this.secondTableSort;
    // See => https://stackru.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w
    this.cdRef.detectChanges()
  }
}

<mat-table
  #firstTable
  #firstTableSort="matSort"
  [dataSource]="myFirstTableData"
  matSort
>
  <ng-container matColumnDef="column1">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
    <mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
  </ng-container>
</mat-table>

<mat-table
  #secondTable
  #secondTableSort="matSort"
  [dataSource]="mySecondTableData"
  matSort
>
  <ng-container matColumnDef="column1">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell>
    <mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell>
  </ng-container>
</mat-table>

Answer 2

После того, как я несколько часов бился головой о стену, мне, наконец, удалось выполнить эту работу.

Использование Angular v.8.2.0.

Я предполагаю, что все необходимые атрибуты используются и верны (mat-sort, mat-table, [dataSource], matColumnDef, mat-sort-header, так далее).

У меня есть простой компонент с двумя сортируемыми таблицами (для краткости я опустил нерелевантный код).

Каждая из таблиц имеет уникальный атрибут ref в шаблоне. Например:

<table #table1>
<table #table2>

Затем в компоненте я использую @ViewChild декоратор для каждого из сортировщиков:

@ViewChild('table1', { read: MatSort, static: true }) sort1: MatSort;
@ViewChild('table2', { read: MatSort, static: true }) sort2: MatSort;

В readнедвижимость здесь очень важна. Не пропустите!

Затем в ngOnInit), Я назначаю сортировщики каждому источнику данных таблицы, как показано в официальных документах:

this.dataSource1.sort = this.sort1;
this.dataSource2.sort = this.sort2;

Надеюсь, этот ответ кому-то поможет.

Answer 3

Вот рабочее решение Angular 6 для сортировки по нескольким таблицам:

import { MatSort, MatTableDataSource } from '@angular/material';

...

@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;

...

Источник данных 1:

this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;

Источник данных 2:

this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;

...

Таблица 1 (Вид):

<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

Таблица 2 (Вид):

<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

Answer 4

Вот мое решение с использованием декоратора свойств @ViewChildren. Убедитесь, что порядок ваших таблиц соответствует порядку в QueryList.

"@ angular / material": "^7.3.7"

import { MatSort, MatTableDataSource } from '@angular/material';

sortList: QueryList<MatSort>;
@ViewChildren(MatSort) set matSort(ms: QueryList<MatSort>) {
    this.sortList = ms;
    if (this.dataSource1) {
      this.dataSource1.sort = this.sortList.toArray()[0];
    }
    if (this.dataSource2) {
      this.dataSource2.sort = this.sortList.toArray()[1];
    }
    if (this.dataSource3) {
      this.dataSource3.sort = this.sortList.toArray()[2];
    }
}

настроить MatTableDataSource в ngOnInit ():

this.datSource1 = new MatTableDataSource(this.userData1);
this.dataSource2 = new MatTableDataSource(this.userData2);
this.dataSource3 = new MatTableDataSource(this.userData3);

HTML (упрощенный)

<mat-table [dataSource]="dataSource1" matSort>
  <ng-container matColumnDef="name">
    <mat-header-cell mat-sort-header *matHeaderCellDef>Name</mat-header-cell>
    ...
  </ng-container>
</mat-table>
<mat-table [dataSource]="dataSource2" matSort>...</mat-table>
<mat-table [dataSource]="dataSource3" matSort>...</mat-table>

Answer 5

Для Angular 8: вам нужно использовать {static: true} после имени сортировки

@ViewChild('firstTable',{static: true}) firstTable: MatSort;

Answer 6

Я поместил вторую сортировку матов в компоненте chid и использую Angular @Input для передачи данных между родителем и потомком. https://angular.io/guide/component-interaction

Например: первая сортировка по мату для данных Order и вторая сортировка по мату для OrderDetail. (Я ожидаю, что в результате я нажму на заказ, чтобы развернуть подробные данные заказа, и у обоих будет функция сортировки. Это работа для меня, надеюсь помочь вам.)
В родительском компоненте:
'<' app-sales-orderdetail [orderDetailDataInChild] = "orderDetailDataInParent" '>' '<' / app-sales-orderdetail '>'

В дочернем компоненте:
@Input () orderDetailDataInChild = new MatTableDataSource ();