Angular 角度：垫子排序不适用于桌状扩展

我正试着把桌子整理一下，但没有整理好。我发现问题在于没有发生。这不会发生，因为

mat sort header

与模型不匹配。但问题是我的JSON对象与此不同。此外，对于名称部分，我的数据来自

firstName

，

middleName

，

lastName

，我必须仅将其显示为名称。让我在下面展示我的JSON对象和我的HTML：

从API接收的JSON对象

[
    {
        "exam": {
            "examCategory": {
                "examCategoryName": "Freshers",
                "id": 157,
                "timestamp": "2020-07-07 11:55:22.425"
            },
            "examName": "First Demo",
            "timestamp": "2020-07-07 15:17:32.0"
        },
        "id": 94,
        "user": {
            "id": 9,
            "firstName": "AVISHEK",
            "middleName": "DATTA",
            "lastName": "RAY",
            "timestamp": "2020-07-07 15:06:58.186"
        },
        "timestamp": "2020-07-07 13:15:24.898"
    }
]

示例.component.html

isplayMode="flat" class="mat-table" [class.d-none]="isLoading || length==0">
  <section matSort class="mat-elevation-z2 mat-header-row">
    <span class="mat-header-cell" mat-sort-header="user.id">User Id</span>
    <span class="mat-header-cell" mat-sort-header="name">Name</span>
    <span class="mat-header-cell" mat-sort-header="examName">Exam Name</span>
    <span class="mat-header-cell" mat-sort-header="examCategoryName">Exam Category</span>
    <span class="mat-header-cell" mat-sort-header="marks">Marks Obtained</span>
  </section>
  <mat-expansion-panel *ngFor="let result of selectedResult | async">
    <mat-expansion-panel-header class="mat-row">
      <span class="mat-cell">{{ result.user.id }}</span>
      <span class="mat-cell">
        {{ result.user.firstName | titlecase }} 
        {{ result.user.middleName | titlecase }} 
        {{ result.user.lastName | titlecase }}
      </span>
      <span class="mat-cell">{{ result.exam.examName }}</span>
      <span class="mat-cell">{{ result.exam.examCategory.examCategoryName }}</span>
    </mat-expansion-panel-header>
    <div class="row">
      // Any Body //
    </div>
  </mat-expansion-panel>
</mat-accordion>

isplayMode=“flat”class=“mat table”[class.d-none]=“isLoading | | length==0”>
用户Id
名称
考名
考试类别
获得的分数
{{result.user.id}
{{result.user.firstName | titlecase}
{{result.user.middleName | titlecase}
{{result.user.lastName | titlecase}
{{result.exam.examName}
{{result.exam.examCategory.examCategoryName}
//任何机构//

正如在TS中一样，我已经声明了

selectedResult

As

selectedResult:Observable

。

---

我需要做什么更改才能使分拣工作正常进行？

我不确定。。但是你可以这样尝试

当您从API接收JSON对象时

[
    {
        "exam": {
            "examCategory": {
                "examCategoryName": "Freshers",
                "id": 157,
                "timestamp": "2020-07-07 11:55:22.425"
            },
            "examName": "First Demo",
            "timestamp": "2020-07-07 15:17:32.0"
        },
        "id": 94,
        "user": {
            "id": 9,
            "firstName": "AVISHEK",
            "middleName": "DATTA",
            "lastName": "RAY",
            "timestamp": "2020-07-07 15:06:58.186"
        },
        "timestamp": "2020-07-07 13:15:24.898"
    }
]

在

示例.component.ts中

undortedData: any;
mainData: any;
this.mainData = [
 {
    "exam": {
        "examCategory": {
            "examCategoryName": "Freshers",
            "id": 157,
            "timestamp": "2020-07-07 11:55:22.425"
        },
        "examName": "First Demo",
        "timestamp": "2020-07-07 15:17:32.0"
    },
    "id": 94,
    "user": {
        "id": 9,
        "firstName": "AVISHEK",
        "middleName": "DATTA",
        "lastName": "RAY",
        "timestamp": "2020-07-07 15:06:58.186"
    },
    "timestamp": "2020-07-07 13:15:24.898"
 }
];

this.undortedData = [...this.mainData];

    sortData(sort: Sort) {
    const data = this.unsortedData.slice();
    if (!sort.active || sort.direction === '') {
      this.mainData = data;
      return;
    }

    this.mainData = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'name': return this.compare(a.name, b.name, isAsc);
        default: return 0;
      }
    })

  }

    compare(a: number | string, b: number | string, isAsc: boolean) {
       return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
      }

</mat-accordion> isplayMode="flat" class="mat-table" [class.d-none]="isLoading || length==0">
  <section matSort (matSortChange)="sortData($event)" class="mat-elevation-z2 mat-header-row">
    <span class="mat-header-cell" mat-sort-header="user.id">User Id</span>
    <span class="mat-header-cell" mat-sort-header="name">Name</span>
    <span class="mat-header-cell" mat-sort-header="examName">Exam Name</span>
    <span class="mat-header-cell" mat-sort-header="examCategoryName">Exam Category</span>
    <span class="mat-header-cell" mat-sort-header="marks">Marks Obtained</span>
  </section>
  <mat-expansion-panel *ngFor="let result of selectedResult | async">
    <mat-expansion-panel-header class="mat-row">
      <span class="mat-cell">{{ result.user.id }}</span>
      <span class="mat-cell">
        {{ result.user.firstName | titlecase }} 
        {{ result.user.middleName | titlecase }} 
        {{ result.user.lastName | titlecase }}
      </span>
      <span class="mat-cell">{{ result.exam.examName }}</span>
      <span class="mat-cell">{{ result.exam.examCategory.examCategoryName }}</span>
    </mat-expansion-panel-header>
    <div class="row">
      // Any Body //
    </div>
  </mat-expansion-panel>
</mat-accordion>

用户Id
名称
考名
考试类别
获得的分数
排序数据（排序：排序）{
const data=this.yourJsonData.slice（）；
如果（！sort.active | | sort.direction==“”）{
this.sortedData=数据；
返回；
}

---

这样，您必须将matSortChange事件设置到您的分区中。应用此事件后，它应该可以工作您只需修改

sortData（sort:sort）

文档中根据数据结构给出的代码

将

mat sort header=“user.id”

更改为

mat sort header=“userId”

。文本仅用于匹配

sortData（sort:sort）

中的大小写，因此不必使用点符号。此外，我不确定它是否可以使用点符号

在切换情况下修改compare函数的输入。如对于examName传递

compare（a.exam.examName，b.exam.examName，isAsc）

，即根据JSON数据结构

对于name这件事来说，对名称行进行排序有点棘手。在html中，您使用字符串插值来显示连接的名称，类似地，使用将连接的名称传递给后续的比较函数

谢谢你的理解

---

注意：-由于api响应没有任何MarksBatined属性，所以没有添加marks部分，但我猜这是一个数字，只需传递类似于用户ID的内容即可。您已经提到，您的JSON不正确，我们假设您现在已经自己更正了它。 另外，看起来您需要一个具有matSort功能的可扩展行（实际上不是

mat扩展面板

）

使用

---

在

mat sort header

中具有可扩展行的表

我们可以将标题名称写为

user.id

，因为每当我这样写时，它不是排序而是只写

id

does@Avishek因此，我认为您应该编写

id

。或者您可以使用

table

，而不是使用

section

。因为我在

表格中使用此
matSort
，效果非常好。对于表格，我知道这很简单，但我的要求是扩展面板。我刚刚用mat table尝试了此方法，但我看到的是
Name
列没有排序。您还应该共享您的
示例.component.ts
代码。创建一个stackblitz示例代码完整