我的垫子表可以使用多个过滤器正常工作。然后添加mat-sort并尝试排序，没有任何变化。
table-filtering-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>
table-filtering-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);
}
}
这是堆叠闪电战：
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';
排序功能应该起作用
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句