使用角度材质的MatSort

Question

我的customer.component.ts:中有这个

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { NorthwindService } from 'swagger';
import {LiveAnnouncer} from '@angular/cdk/a11y';
import {MatSort} from '@angular/material/sort';
@Component({
selector: 'app-customers',
templateUrl: './customers.component.html',
styleUrls: ['./customers.component.scss']
})
export class CustomersComponent implements OnInit {
displayedColumns: string[] = ['id', 'name', 'contact', 'city', 'country', 'orders'];
customers!: any[];
constructor(private northwindService: NorthwindService, private _liveAnnouncer: LiveAnnouncer) { }
@ViewChild(MatSort) sort!: MatSort;

ngOnInit(): void {

this.northwindService.apiCustomersGet().subscribe(data => {
this.customers = data;
});
this.customers.sort = this.sort; <--- this wont't compile
}
}

CCD_ 1正在产生一些问题。

错误Iget为：

类型"MatSort"不可分配给类型"(compareFn？：((a:any，b:any(=>数字(|未定义(=>任何[]’。类型"MatSort"不提供签名"(compareFn？：((a:any，b:any(=>number(| undefined(：任意[]’.ts(2322(

我看过的每一个关于它的教程都很有效。

Answer 1

如文档中所示示例：

@ViewChild(MatSort, {static: true}) sort: MatSort;
...
this.dataSource = new MatTableDataSource(yourData);
this.dataSource.sort = this.sort;

Answer 2

1. 首先，排序时最好不要使用"Any[]"，而是必须定义客户模型结构，并使其可读编译器
2. 请注意，需要将MatSort添加到MatTableDataSource中
3. 在视图初始化之后设置排序，因为此组件将能够使用：ngAfterViewInit((查询其视图中的初始化排序

import { MatTableDataSource } from '@angular/material/table';
import { AfterViewInit, ViewChild } from '@angular/core';

export class CustomersComponent implements OnInit, AfterViewInit {
displayedColumns: string[] = ['id', 'name', 'contact', 'city', 'country', 'orders'];
customers: Customer[] = CustomerMock; //Define and initialize the structure
dataSource = new MatTableDataSource<Customer>( this.customers );
@ViewChild( MatSort ) sort: MatSort;

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

它需要在您的模板中注入您的"；数据源"；垫子台中的变量

<table mat-table [dataSource]="dataSource" matSort >