Угловой 7 материал вкладки со списком

Question

У меня есть последние версии Angular и последняя версия компонента материала для него.Я пытаюсь визуализировать таблицу, которая находится внутри Tab Control.Однако я не могу смонтировать операцию сортировки.Пожалуйста помоги.Вот код: Вид:

<div class="container">
  <div id="content">
    <div id="main-content">
      <div>
        <mat-form-field>
          <input matInput placeholder="Category Name" name="keyword" [(ngModel)]="keyword">
        </mat-form-field>
        <mat-checkbox [(ngModel)]="isActive" name="isActive">Active only</mat-checkbox>
        <button mat-button type="button">Search</button>
      </div>
      <mat-tab-group (selectedTabChange)="onTabChange($event)">
        <mat-tab [label]="sysCategory.name" *ngFor="let sysCategory of systemCategories">
          <div>
            <table mat-table matSort matSortDisableClear [dataSource]="dataSource?.items" class="mat-elevation-z4">
              <tr>
                <ng-container matColumnDef="name">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Category</th>
                  <td mat-cell *matCellDef="let element">
                    <mat-form-field *ngIf="element.inEditMode">
                      <input matInput placeholder="Category" required maxlength="255" [(ngModel)]="element.name" />
                    </mat-form-field>
                    <span *ngIf="!element.inEditMode">{{element.name}}</span>
                  </td>
                </ng-container>
              </tr>
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>
</div>

Компонент:

export class CategoriesListComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['name', 'delete', 'edit'];
  dataSource: ResultsList<CategoryModel>;

  systemCategories: SystemCategoryModel[];
  sysCategoryId: number;
  isActive = true;
  keyword: '';

  @ViewChild(MatSort) sort: MatSort = new MatSort();

  constructor(private systemCategoriesService: DictionaryService, private categoriesService: CategoriesService) { }

  ngOnInit() {
    this.systemCategoriesService.getDictionary<SystemCategoryModel>(SystemCategoriesUrl)
      .subscribe(v => { this.systemCategories = v; });
  }

  ngAfterViewInit() {
    // S.O.S it doesnt work here for sure!
    // this.sort.sortChange.subscribe(() => this.loadGrid());
  }

  onTabChange(tabChangeEvent: MatTabChangeEvent) {
    this.sysCategoryId = this.systemCategories[tabChangeEvent.index].id;
    this.loadGrid();
  }

  loadGrid() {
    const query = this.createQuery();
    this.categoriesService.load(query).subscribe(v => this.dataSource = v);
  }

  private createQuery(): CategoriesSearchQuery {
    return {
      isActive: this.isActive,
      keyword: this.keyword,
      pageIndex: 0,
      pageSize: 1000,
      sortField: this.sort && this.sort.active || 'name',
      isDesc: this.sort && this.sort.direction === 'desc' || false,
      systemCategoryId: this.sysCategoryId
    };
  }

Answer 1

Измените это @ViewChild(MatSort) sort: MatSort = new MatSort(); на просто @ViewChild(MatSort) sort: MatSort;.

Кроме того, вам необходимо присвоить MatSort источнику данных следующим образом: this.dataSource.sort = this.sort;, это обычно делается в ngOnInit().

Для получения дополнительной информации ознакомьтесь с официальными примерами Angular Material , есть пример таблицы с фильтрацией, которая должна удовлетворить ваши потребности.

Еслиу вас есть несколько таблиц и источников данных на нескольких вкладках. Я предлагаю разделить их и не использовать один и тот же источник данных и MatSort, поскольку это приведет к странному поведению.Я бы проиндексировал данные по текущей вкладке, на которой вы находитесь, и затем отобразил бы соответствующий источник данных.

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