角度材料表排序无法正常工作

Question

我的 mat-table 可以很好地使用多个过滤器。 然后添加 mat-sort 并尝试排序，没有任何变化。

表过滤-example.html

<mat-card>
<div class="row">
    <div class="col-12">
        <mat-form-field>
            <mat-label>Category</mat-label>
            <mat-select [(ngModel)]="categoryFilter" (selectionChange)="applyFilter($event.target)">
                <mat-option>All</mat-option>
                <mat-option *ngFor="let category of categories" [value]="category">
                    {{ category }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <div class="col-12">
        <mat-form-field>
            <input
  matInput
  [(ngModel)]="productFilter"
  (keyup)="applyFilter($event.target.value)"
  placeholder="Search"
/>
            <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>
    </div>
</div>

    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef  mat-sort-header>Product</mat-header-cell>
        <mat-cell *matCellDef="let product">
            {{ product.name }}
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="category">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Category</mat- 
    header-cell>
        <mat-cell *matCellDef="let product">
            {{ product.category}}
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</div>

表过滤-example.ts

import { Component, ViewChild, OnInit } from "@angular/core";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";

@Component({
selector: 'table-filtering-example',
styleUrls: ['table-filtering-example.css'],
templateUrl: 'table-filtering-example.html',
})
export class TableFilteringExample {
@ViewChild(MatSort) sort: MatSort;

products = [
{ name: "Lenovo", category: "Notebook" }, 
{ name: "Asus", category: "Notebook" },
{ name: "HP", category: "Notebook" },
{ name: "Dell", category: "Notebook" },
{ name: "Logitech MX Master Mouse", category: "Notebook Accessories" },
{ name: "Razer DeathAdder Mouse", category: "Notebook Accessories" },
{ name: "Apple Magic Keyboard", category: "Notebook Accessories" },
{ name: "İphone X", category: "Mobile Phone" },
{ name: "Xaomi9", category: "Mobile Phone" },
{ name: "Galaxy Note 10", category: "Mobile Phone" }
];

categories = ["Notebook", "Notebook Accessories", "Mobile Phone"];
displayedColumns = ["name", "category"];

dataSource = new MatTableDataSource(this.products);

categoryFilter;
productFilter = "";

ngAfterViewInit() {
this.dataSource.sort = this.sort;
}

applyFilter() {
let filteredData;

if (this.categoryFilter === undefined) {
  filteredData = this.products.filter(x =>
    x.name.toLocaleLowerCase()
      .trim()
      .includes(this.productFilter)
  );
  } else {
  filteredData = this.products.filter(
    x =>
      x.name.toLocaleLowerCase()
        .trim()
        .includes(this.productFilter) && x.category === 
this.categoryFilter
  );
}

this.dataSource = new MatTableDataSource(filteredData);
}
}

这是堆栈闪电战：

https://stackblitz.com/edit/angular-material-datatable-multi-column-filter-d1dt1l?file=app/table-filtering-example.css

Answer 1

Angular @ViewChild装饰器无法识别模板中的MatSort实例，因为您从两个不同的包中导入MatSort ：

主文件

import { MatSortModule } from '@angular/material';

app.component.ts

import { MatSort } from '@angular/material/sort';

一旦导入MatSort从您的同一路径AppComponent ：

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

排序功能应该可以工作

分叉的堆栈闪电战