Angular изменить параметр трубы из машинописи

Question

Я пытаюсь отсортировать список объектов в таблице, когда нажимаю на заголовок.

Я уже пытался отсортировать список из TypeScript, а затем обновить переменную, привязанную к таблице, но список снова появляется, как это было до сортировки.

//Set with a list from DB
public items: Items[]

let sort: Item[] = this.items.sort((a, b) => parseInt(a.id) - parseInt(b.id));
    console.log(sort);
    this.items = null;
    this.items = sort;

Итак, возможно ли использовать трубу OrderBy следующим образом:

*ngFor="let item of items | OrderBy:'asc':'propertyName'"

Затем программно изменить propertyName?

Answer 1

Вы также должны иметь возможность делать это по-своему, но у вас должна быть функция для запуска обнаружения изменений и повторного рендеринга строк в таблице.

@ViewChild(MatTable) table: MatTable<any>;

затем вы звоните

this.table.renderRows()

, и в зависимости от вашей стратегии обнаружения изменений вам также может понадобиться позвонить

this.ref.detectChanges()

. Вы должны ввести ссылку на детектор изменений. тогда в вашем конструкторе:

constructor(private ref: ChangeDetectorRef) {}

Но тогда в материале Angular есть эта встроенная функциональность, документация для этого весьма превосходна с довольно многими современными примерами:

[URL]

Вот пример, копия которого вставлена ​​оттуда:

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

 sortedData: Dessert[];

  constructor() {
    this.sortedData = this.desserts.slice();
  }

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

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

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