排序+@Input()时，角度材质表不起作用

Question

我正在做一个表组件。

这个组件在没有可排序功能的情况下工作得很好。当我试图使表可排序时，如果我使用的是基本示例，即当您将对象列表存储在常量中，但当我尝试使用@Input()时，行不显示，则此操作有效

带有常量的版本-有效

import {AfterContentInit, AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
import {Client, ClientStatus} from '@models/client.model';
import {ClientService} from '@services/client.service';
import {MatSort, Sort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
const ELEMENT_DATA: Client[] = [
...
];
@Component({
selector: 'app-table-entries',
templateUrl: './table-entries.component.html',
styleUrls: ['./table-entries.component.scss']
})
export class TableEntriesComponent implements OnInit, AfterViewInit {
displayedColumns: string[] = ['expectedDate', 'description.id', 'priority' ];
@ViewChild(MatSort, {static: true}) sort: MatSort;
sortableEntries = new MatTableDataSource(ELEMENT_DATA);
constructor( clientService: ClientService ) {}
ngOnInit(): void {}
ngAfterViewInit() {
this.sort.active = 'expectedDate';
this.sort.direction = 'asc';
this.sortableEntries.sort = this.sort;
this.sortableEntries.sortingDataAccessor = ( client, property) => {
switch ( property ) {
case 'description.id': return client.description.id;
default: return client[property];
}
};
}
}

带有@Input的版本-不起作用

import {AfterContentInit, AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
import {Client, ClientStatus} from '@models/client.model';
import {ClientService} from '@services/client.service';
import {MatSort, Sort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
@Component({
selector: 'app-table-entries',
templateUrl: './table-entries.component.html',
styleUrls: ['./table-entries.component.scss']
})
export class TableEntriesComponent implements OnInit, AfterViewInit {
@Input() entries: Client[] = [];
displayedColumns: string[] = ['expectedDate', 'description.id', 'priority' ];
@ViewChild(MatSort, {static: true}) sort: MatSort;
sortableEntries: MatTableDataSource<Client>;
constructor( clientService: ClientService ) {}
ngOnInit(): void {
this.sortableEntries = new MatTableDataSource<Client>( this.entries );
}
ngAfterViewInit() {
this.sort.active = 'expectedDate';
this.sort.direction = 'asc';
this.sortableEntries.sort = this.sort;
this.sortableEntries.sortingDataAccessor = ( client, property) => {
switch ( property ) {
case 'description.id': return client.description.id;
default: return client[property];
}
};
}
}

模板

<table mat-table matSort [dataSource]="sortableEntries">
<!-- Heure RDV -->
<ng-container matColumnDef="expectedDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Heure rdv </th>
<td mat-cell *matCellDef="let element"> {{ element.expectedDate | date: "d/M HH:mm" }} </td>
</ng-container>
<!-- Identifiant -->
<ng-container matColumnDef="description.id">
<th mat-header-cell *matHeaderCellDef mat-sort-header="description.id"> Identifiant </th>
<td mat-cell *matCellDef="let element"> {{ element.description.id}} </td>
</ng-container>
<!-- Nature -->
<ng-container matColumnDef="priority">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Nature </th>
<td mat-cell *matCellDef="let element" > {{ element.priority | getStringPriority }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; let even = even; columns: displayedColumns;" [ngClass]="{ 'table-even-row': even}"></tr>
</table>
<section *ngIf="entries && entries.length === 0" class="no-client-wrapper"><p>Il n'y a pas d'entrée actuellement</p></section>

我可以想象问题出在加载对象列表的那一刻，但我不知道如何解决这个问题。有人有主意吗？

Answer 1

我在这里找到了一个解决方案。

首先，通过更改@Input() entries: Client[] = [];

@Input() set entries( data: Client[] ) {
this.setTableDataSource(data);
}

然后，使用ngAfterViewInit中的内容使函数

setTableDataSource(data: any) {
this.sortableEntries = new MatTableDataSource<any>(data);
this.sortableEntries.sort = this.sort;
this.sort.active = 'expectedDate';
this.sort.direction = 'asc';
this.sortableEntries.sortingDataAccessor = ( client, property) => {
switch ( property ) {
case 'description.codeUT': return client.description.codeUT;
default: return client[property];
}
};
}

完整结果

import {AfterContentInit, AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
import {Client, ClientStatus} from '@models/client.model';
import {ClientService} from '@services/client.service';
import {MatSort, Sort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
@Component({
selector: 'app-table-entries',
templateUrl: './table-entries.component.html',
styleUrls: ['./table-entries.component.scss']
})
export class TableEntriesComponent implements OnInit{
displayedColumns: string[] = ['expectedDate', 'description.id', 'priority' ];
@ViewChild(MatSort, {static: true}) sort: MatSort;
sortableEntries: MatTableDataSource<Client>;
@Input() set entries( data: Client[] ) {
this.setTableDataSource(data);
}
setTableDataSource(data: any) {
this.sortableEntries = new MatTableDataSource<any>(data);
this.sortableEntries.sort = this.sort;
this.sort.active = 'expectedDate';
this.sort.direction = 'asc';
this.sortableEntries.sortingDataAccessor = ( client, property) => {
switch ( property ) {
case 'description.id': return client.description.id;
default: return client[property];
}
};
}
constructor( clientService: ClientService ) {
this.sortableEntries = new MatTableDataSource<Client>( this.entries );
}
ngOnInit(): void {
console.dir( this.entries );
}
}