Question

mat-sort在来自另一个数据库的mat-table的一列上不起作用，其余的列则工作正常。唯一的区别是，我正在从另一服务中获取该列的数据。

我试图用ngAfterViewInit解决它，但无济于事。

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

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Resource </th>
  <td mat-cell *matCellDef="let element"> {{element.creator.name}} </td>
  <td mat-footer-cell *matFooterCellDef> </td>
</ng-container>

displayedColumns: string[] = ['projectName', 'date', 'hours', 'description', 'name', 'location', 'Edit'];

@ViewChild(MatSort) sort: MatSort;

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

Answer 1

不知道您的数据模型，这样的事情应该可以解决您的问题（在您的ngOnInit中）：

this.dataSource.sortingDataAccessor = (item, property) => {
  if (property === 'name') {
    return item.creator.name;
  } else {
    return item[property];
  }
};

此字段上的排序无效，因为Angular试图通过字符串ID访问列数据，该列ID为name，但列数据实际上位于element.creator.name下（ Angular正在element.name下看）。

有关更多信息，请查看完整的文档here（始终在页面底部），其中指出：

数据访问器函数，用于访问以下对象的数据属性通过默认的sortData函数进行排序。 此默认功能假定排序标题ID（默认为列名）匹配数据的属性（例如Xyz列代表数据['Xyz']）。可以将其设置为自定义函数，以实现不同的行为。

Answer 2

如果mat-table中的一个字段不起作用，则需要使用HTML代码displayedColumns检查matColumnDef。

如果该剂量不匹配，则需要将其作为ts和html双方都使用。

对于Ex：displayedColumns在TS端具有NAME，TAGSCREENS，在HTML端具有其他名称，如果使它通用，则排序标题将不起作用，那么它将对您有用。

displayedColumns: string[] = ['name', 'tagScreens'];
dataSource= new MatTableDataSource([]);

您需要导入这些MatSort组件

@ViewChild(MatSort, { static: true }) sort: MatSort;

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

 <ng-container matColumnDef="tagScreens">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Screens </mat-header-cell>
     <mat-cell *matCellDef="let element">
            {{ element.tagScreens.length > 0 ? (element.tagScreens | separateWithComa : seprateWithCommaPipeConst.name) : 'NA'}}
      </mat-cell>
 </ng-container>

有关更多信息，Click here

mat-sort-header / mat-sort不适用于来自其他数据库的特定列

2 个答案: