Как я могу показать стрелки моей отсортированной таблицы в соответствии с моим порядком сортировки в angular?

Question

У меня есть таблица, которую я сортирую от большего к меньшему или в алфавитном порядке.

вот html той части, которую я сортирую

       <tr>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="no">
                         <span (click)="sort()" class="sort-icon d-flex"> No
                            <mat-icon *ngIf="sorting === 'desc'">keyboard_arrow_down</mat-icon>
                             <mat-icon *ngIf="sorting === 'asc'">keyboard_arrow_up</mat-icon>
                         </span>
                     </th>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="id">
                         <span (click)="sort()" class="sort-icon d-flex">Id
                             <mat-icon *ngIf="sorting === 'desc'">keyboard_arrow_down</mat-icon>
                             <mat-icon *ngIf="sorting === 'asc'">keyboard_arrow_up</mat-icon>
                         </span>
                     </th>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="type">Tür</th>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="additional">Ek</th>
                     <th scope="col" [appSort]="dataList" data-order="desc" data-name="media">Medya
                     </th>
                 </tr>

** а вот моя функция в машинописной части **

       sorting = "desc"
 sort() {
        if (this.sorting == "desc") {
            this.sorting = "asc"
        } else {
            this.sorting = "desc"
        }
    }

Моя проблема здесь в том, что когда я сортирую по «НЕТ», моя стрелка в «ID» перемещается. Как я могу это решить?

Когда я нажимаю «НЕТ», я просто хочу, чтобы стрелка двигалась вверх и вниз.

сноска: это мой первый вопрос, пожалуйста, покритикуйте, если я что-то упустил.

Answer 1

Если это не так, вам нужно импортироватьprivate _cd: ChangeDetectorRef,в конструктор компонента.

И добавьте функцию стирания сортировки:

       sorting = "desc"
 sort() {
   this.sorting = (this.sorting == "desc") ? "asc" : "desc"; 
   this._cd.markForCheck();
 }

Answer 2

Я не уверен, хотите ли вы пройти через это или нет. Но учитывая, что вы не хотите, чтобы это решение сработало. Я только что использовал базовую структуру из вашего кода, потому что не хотел устанавливать все модули. Но это должно дать вам представление.

      <th scope="col"  data-order="desc" data-name="no">
  <span (click)="sort('no')" class="sort-icon d-flex"> No
     <span *ngIf="sorting['no'] === 'desc'">↑</span>
      <span *ngIf="sorting['no'] === 'asc'">↓</span>
  </span>
</th>
<th scope="col"  data-order="desc" data-name="id">
  <span (click)="sort('id')" class="sort-icon d-flex">Id
      <span *ngIf="sorting['id'] === 'desc'">↑</span>
      <span *ngIf="sorting['id'] === 'asc'">↓</span>
  </span>
</th>
<th scope="col"  data-order="desc" data-name="type">Tür</th>
<th scope="col"  data-order="desc" data-name="additional">Ek</th>
<th scope="col"  data-order="desc" data-name="media">Medya
</th>

sorting = { no: 'desc', id: 'desc' };
  sort(key: any) {
    if (this.sorting[key] == 'desc') {
      this.sorting[key] = 'asc';
    } else {
      this.sorting[key] = 'desc';
    }
  }

Основная идея состоит в том, чтобы сохранить сортировку каждого столбца отдельно. Либо в самом источнике данных, либо в отдельном объекте, как я показал в примере.

Надеюсь это поможет.

вот рабочий пример. Пример стекблиц

Answer 3

Я думаю, что решение зависит от ваших требований. Если вы хотите, чтобы таблица была отсортирована на основе двух столбцов, то решение, данное @tarun-bhati, должно работать, предполагая, что сортировка работает таким образом.

Если вы хотите, чтобы таблица сортировалась только по одному столбцу, вы можете сделать что-то вроде -

        sortingOrder: string;
  sortedColumn: string;
  sort(column: string) {
    if (this.sortingOrder == 'desc') {
      this.sortingOrder = 'asc';
    } else {
      this.sortingOrder = 'desc';
    }
    this.sortedColumn = column;
  }

А затем используйте их с условиями then в значках сортировки.