Можно ли сортировать плитки в сетке?

Question

У меня возникла следующая проблема: у меня есть класс под названием «script» с несколькими свойствами, такими как «id», «name», «number» и т. Д.

В html сценарии отображаются следующим образом:

<mat-grid-list [cols]="breakpoint" rowHeight="4:4" [@gridAnimation]="(scenarios$ | async)?.length" (window:resize)="onResize($event)">
    <mat-grid-tile *ngFor="let scenario of filteredScenarios$ | async ">
      <app-scenario-card [scenario]="scenario" [routerLink]="['/scenario', scenario.id]"></app-scenario-card>
    </mat-grid-tile>
  </mat-grid-list>

Можно ли отсортировать отображаемые фрагменты сценариев по выбранному свойству (имя, идентификатор, номер ...)?Все, что я нашел в отношении сортировки, это все о таблицах или сетках.

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

Спасибо большоемного.

Кстати, я не могу просто перейти от таблицы к таблице.

Класс сценария получил следующие свойства:

export class Scenario {
id: number;
scenarioName: string;
scenarioDescription: string;
periods: number; }

У меня естьокно поиска для фильтрации (построить аналог этого урока -> https://blog.angulartraining.com/dynamic-filtering-with-rxjs-and-angular-forms-a-tutorial-6daa3c44076a). Теперь мне просто нужна функция сортировки для id, имя сценария и периодов, например, для кнопки или DropDown.

Код для фильтрации выглядиткак это:

this.scenarios$ = this.scenariosService.getScenarios();
this.filter = new FormControl('');
this.filter$ = this.filter.valueChanges.pipe(startWith(''));
this.filteredScenarios$ = combineLatest(this.scenarios$, this.filter$).pipe(
  map(([Scenario, filterString]) => Scenario.filter(scenario => scenario.scenarioName.indexOf(filterString) !== -1)));

Answer 1

Вы должны отсортировать filteredScenarios$ по свойству перед отправкой в ​​шаблон. Для этого я бы ввел еще один BehaviorSubject, который содержит свойство сортировки.

Трудно написать, так как вы не опубликовали структуру своих объектов, но попробуете.

В тс:

private sortProperty$ = new BehaviorSubject<string>('name'); //or whatever you default sort is
filteredSortedScenarios$: Observable<Scenario>

и в конструкторе или ngOnInt:

this.filteredSortedScenarios$ = combineLatest([this.filteredScenarios$, this.sortProperty$])
  .pipe(
    map(([scenarios, sortBy]) => {
      console.log('Sorting by', sortBy);

      return scenarios.sort((a, b) => {
        switch (sortBy) {
          case 'name':
            return a.name.localeCompare(b.name);

          case 'otherProperty':
            return ...;
        }
      });
    }));

combineLatest испускается всякий раз, когда изменяется какая-либо из этих наблюдаемых, и в map вы просто сортируете список.

Если вы хотите изменить порядок сортировки, просто позвоните:

sortProperty$.next('nowSortByThisProperty');

И, наконец, в шаблоне вы перечисляете сценарии из filteredSortedScenarios$:

<mat-grid-tile *ngFor="let scenario of filteredSortedScenarios$ | async ">