我有一個不同型別的界面：
export interface PeriodicElement {
name: string;
position: number;
refDate?: Date;
refTime?: string;
symbol: string;
phone: string;
email: string;
url: string;
note1: string;
note2: string;
}
我使用日期管道refDate在表格列中顯示：
<!-- Reference Date Column -->
<ng-container matColumnDef="refDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Ref. Date</th>
<td mat-cell *matCellDef="let element">{{element.refDate | date}}</td>
</ng-container>
但是 - 通過材料日期選擇器更改行的日期后 - 當我按“參考日期”排序時，行沒有正確排序。
uj5u.com熱心網友回復：
通過物料日期選擇器更改行的日期后
出現問題是因為 的內部表示item.refDate是一個字串 eg2021-10-24T22:00:00.000Z但本機日期選擇器可以將保存的item.refDate轉換Mon Nov 01 2021 00:00:00為不再正確排序的eg 。
為了解決這個問題，我設定了一個自定義排序如下：
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'refDate': {
if (item.refDate) {
return new Date(item.refDate);
}
return null;
}
default: {
return item[property as keyof PeriodicElement] as any;
}
}
};
請注意這樣return item[property as keyof PeriodicElement] as any;寫的行以克服兩種錯誤：
兩個都
error TS7053: Element implicitly has an 'any' type because expression of type 'string'can't be used to index type 'PeriodicElement'. No index signature with a parameter of type 'string' was found on type 'PeriodicElement'.
和
error TS2322: Type '(item: PeriodicElement, property: string) => string | number | Date | null | undefined' is not assignable to type '(data: PeriodicElement, sortHeaderId: string) => string | number'.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339872.html