Angular：Mat Sort 不适用于类似扩展的表格

Posted 2023-03-13

【中文标题】Angular：Mat Sort 不适用于类似扩展的表格

【英文标题】：Angular: Mat Sort not working for table like expansion

【发布时间】：2020-10-31 01:39:43

【问题描述】：

我正在尝试对表格进行排序，但没有得到排序。我发现问题没有发生。它没有发生，因为mat-sort-header 与模型不匹配。但问题是我的 JSON 对象与 example 不一样。同样对于名称部分，我的数据来自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"
    
]

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 名称。 我需要进行哪些更改才能使排序正常工作？

【问题讨论】：

您还应该分享您的example.component.ts 代码。

创建一个包含完整代码的 stackblitz 示例

【参考方案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>

【讨论】：

在mat-sort-header 中我们可以将标题名称写为user.id，因为每当我这样写时，它不是排序而是只写id 可以

@Avishek 所以，我认为你应该写id。

或者您可以使用table 而不是使用section .. 因为我在table 中使用了这个matSort，它工作得很好。

对于表我知道这很简单，但我的要求是扩展面板

我刚刚用 mat-table 尝试了这个，但我看到的是 Name 列没有排序

【参考方案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;
    

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

【参考方案3】：

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

将mat-sort-header="user.id" 更改为mat-sort-header="userId"。仅需要文本来匹配sortData(sort: Sort) 中的案例，因此不必使用点符号。另外，我不确定它是否适用于点符号。

修改开关情况下比较函数的输入。喜欢 examName 传递 compare(a.exam.examName, b.exam.examName, isAsc) 即根据您的 JSON 数据结构。

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

Working Stackblitz 供您理解。

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

【参考方案4】：

您已经提到您的 JSON 不正确，假设您现在已经自己更正了它。 此外，您似乎想要一个具有 matSort 功能的可扩展行（不是真正的 mat-expansion-panel）

使用 带有可扩展行的表格link