Question

我正在尝试对表格进行排序，但是没有得到排序。我发现问题没有发生。因为mat-sort-header与模型不匹配，所以没有发生。但是问题是我的JSON对象与此example不同。同样对于名称部分，我的数据来自firstName，middleName，lastName，我必须仅将其显示为Name。让我在下面显示我的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"
    }
]

example.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>

在TS中，我将selectedResult 声明为selectedResult : Observable<any[]>，我自己给了mat-sort-header名称。要进行排序，我需要做哪些更改？

Answer 1

我不确定..但是您可以这样尝试...

当您从API接收JSON对象

在 example.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);
      }

在您的example.component.html

</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>

Answer 2

  <section matSort class="mat-elevation-z2 mat-header-ro (matSortChange)="sortData($event)>
    <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>

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

像这样，您必须在部分中设置 matSortChange 事件。应用此后它应该可以工作

Answer 3

您只需要根据数据结构修改sort header angular material文档中提供的sortData(sort: Sort)代码即可。

将mat-sort-header="user.id"更改为mat-sort-header="userId"。仅需要文本来匹配sortData(sort: Sort)中的大小写，因此不必用点号表示。另外，我不确定它是否可以使用点分符号。
在切换情况下修改比较功能的输入。就像 examName 一样，按照您的JSON数据结构传递compare(a.exam.examName, b.exam.examName, isAsc)。
对名称行进行排序对于名称来说有点棘手。在html中，您使用字符串插值来显示串联名称，类似地，使用template literals来将串联名称传递给后续的比较函数。

Working Stackblitz供您理解。

注意：-由于api响应没有任何marksObtained属性，因此未添加标记部分，但是我猜它是一个数字，只是传递与 userid 。

Answer 4

您已经提到您的JSON不正确，并且假设到目前为止您已经为自己更正了它。另外，您似乎想要具有matSort功能的可扩展行（不是真正的mat-expansion-panel）

使用具有可扩展行link

的表

角度：垫排序不适用于表格之类的扩展

4 个答案: