Angular: Сортировка матов не работает для таблицы как расширение

Question

Я пытаюсь отсортировать таблицу, но сортировка не выполняется. Я обнаружил, что проблема не происходит. Этого не происходит, потому что mat-sort-header не соответствует модели. Но проблема в том, что мой объект JSON не совпадает с этим примером . Также для части имени мои данные поступают из firstName, middleName, lastName, и я должен отображать его только как имя. Позвольте мне показать мой объект JSON и мой HTML ниже:

JSON объект, полученный от API

[
    {
        "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

Вы упомянули, что ваш JSON неверен, и предположим, что вы уже исправили его для себя на данный момент. Кроме того, похоже, вам нужна расширяемая строка (не совсем mat-expansion-panel) с функцией matSort

Использовать таблицу с расширяемыми строками ссылка

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

Вам просто нужно изменить код sortData(sort: Sort), указанный в заголовок сортировки angular материал документация, указанная в соответствии со структурой ваших данных.

1. Изменить от mat-sort-header="user.id" до mat-sort-header="userId". Текст будет нужен только для соответствия регистрам в вашем sortData(sort: Sort), поэтому не обязательно использовать точечную нотацию. Кроме того, я не уверен, будет ли он работать с точечной нотацией.

2. Измените входные данные для функции сравнения в случаях переключения. Например, для excName пройдите compare(a.exam.examName, b.exam.examName, isAsc), т.е. в соответствии со структурой данных JSON.

3. Сортировка строки имени для - это немного сложно имя вещь. В html вы используете интерполяцию строк для отображения объединенных имен, аналогично используйте шаблонные литералы для передачи объединенных имен в последующую функцию сравнения.

Рабочий Stackblitz для вашего понимания.

Примечание: - Мы не добавили часть меток, поскольку в ответе api нет свойства markObhibited, но я предполагаю, что это число, просто передайте аналогичный на идентификатор пользователя .

Answer 4

Я не уверен ... но вы можете попробовать вот так ...

Когда вы получили JSON объект из API

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