Как изменить значение сортировки материала angular с asc / des c на имя столбца таблицы / имя столбца - PullRequest
0 голосов
/ 04 августа 2020

У меня есть angular материал с данными, и я хотел бы изменить значение сортировки с asc / des c на имя-столбца / имя-столбца, поскольку я использую Django Rest Framework, а на бэкэнде сортировка выполняется fieldName / -fieldName. Вот мой исходный код, любая помощь о том, как я буду его реализовывать, поскольку то, что я пытаюсь, не работает для меня

<mat-table class="faith-table" [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="name" matSortDisableClear>
    <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Faith name</mat-header-cell>
            <mat-cell *matCellDef="let faith"> {{ faith.name }}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-icon-button (click)="editFaith(row)">
                    <mat-icon>launch</mat-icon>
                </button>
                <button mat-icon-button color="warn" (click)="deleteFaith(row.id)">
                    <mat-icon>delete_outline</mat-icon>
                </button>
            </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
</mat-table>
 @ViewChild(MatSort) sort : MatSort;
 ngAfterViewInit(){
    //Server side search
    fromEvent(this.input.nativeElement,'keyup').pipe(
      debounceTime(1000),
      distinctUntilChanged(),
      tap(() => {
        this.paginator.pageIndex = 0;
        this.loadFaithPage()
      })
    ).subscribe()
    //Reset the paginator after sorting
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0)
    //Merge sort or paginate events, load a new page
    merge(this.sort.sortChange,this.paginator.page).pipe(
      tap(() => this.loadFaithPage())
    ).subscribe()
  }
loadFaithPage(){
    this.dataSource.loadFaith(
      this.input.nativeElement.value,
      this.sort.direction,
      this.paginator.pageIndex,
      this.paginator.pageSize
    )
  }

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...