Question

app-message-action组件基于所选语言呈现已翻译的row.action。如何按此翻译后的字符串对表格进行排序？当前，它按row.action排序良好，但raw.action的值与嵌套组件呈现的字符串不同。

   <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Action</th>
        <td mat-cell *matCellDef="let row" width="60%">
          <app-message-action [deviceTypeId]="deviceTypeId" [key]="'action'" [action]="row.action"></app-message-action>
        </td>
   </ng-container>

我尝试过：

 <table mat-table [dataSource]="dataSource" matSort matSortActive="action" matSortDirection="asc">

甚至考虑覆盖sortingDataAccessor，但没有运气。

Answer 1

这是我对嵌套对象的一种排序。

例如，我按请求者的姓氏对其进行排序。因此，万一'requestOwner'我返回item.requestOwner.lastName。在其他领域也是如此。

this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'status': return item.statusId;
        case 'requestOwner': return item.requestOwner.lastName;
        case 'vehicles': return item.requestVehicles[0].vehicle.plateNumber;
        case 'driver': return item.requestVehicles[0].driver.lastName;
        case 'startDate': return item.requestVehicles[0].startDateTime;
        case 'endDate': return item.requestVehicles[0].endDateTime;
        case 'locations': return item.requestVehicles[0].routes[0].regionName;
        default: return item[property];
      }
    };
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

这是我的数据的样子：

{
"requestId": 0,
"requestOwner": {
    "departmentId": 0,
    "email": "string",
    "firstName": "string",
    "lastName": "string",
    "personId": 0,
    "phoneNumber": "string",
    "userName": "string"
},
"requestVehicles": [
    {
        "driver": {
            "departmentId": 0,
            "email": "string",
            "firstName": "string",
            "lastName": "string",
            "personId": 0,
            "phoneNumber": "string",
            "userName": "string"
        },
        "endDateTime": "2019-03-25T09:29:42.097Z",
        "routes": [
            {
                "addressPointId": "string",
                "id": 0,
                "municipalityId": 0,
                "regionId": 0,
                "rvId": 0,
                "sequenceNumber": 0,
                "settlementId": 0
            }
        ],
        "vehicle": {
            "additionalInfo": "string",
            "currentDriver": {
                "departmentId": 0,
                "email": "string",
                "firstName": "string",
                "lastName": "string",
                "personId": 0,
                "phoneNumber": "string",
                "userName": "string"
            },
            "startDateTime": "2019-03-25T09:29:42.097Z",
        }
    ],
    "statusId": 0
}

这些也是我的显示列：

  displayedColumns = ['status', 'requestOwner', 'vehicles', 'driver', 'startDate', 'endDate', 'locations', 'additionalInfo', 'priority'];

如何基于嵌套组件对材料表进行排序

1 个答案: