как получить нумерацию на стороне сервера, но сортировку на стороне клиента - PullRequest
Новая
       20

как получить нумерацию на стороне сервера, но сортировку на стороне клиента

0 голосов
/ 22 февраля 2020

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

<div >
<div class="example-table-container" >

    <table mat-table [dataSource]="dataSource" class="example-table" style="color:white" matSort matSortActive="accountNumber"
        matSortDisableClear matSortDirection="desc">
        <!-- Number Column -->
        <ng-container matColumnDef="accountNumber">
            <th mat-header-cell *matHeaderCellDef>Account Number</th>
            <td mat-cell *matCellDef="let row">{{row.accountNumber}}</td>
        </ng-container>

        <!-- Title Column -->
        <ng-container matColumnDef="accountTitle">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Account Title</th>
            <td mat-cell *matCellDef="let row">{{row.accountTitle}}</td>
        </ng-container>

        <!-- State Column -->
        <ng-container matColumnDef="currentBalance">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Current Balance</th>
            <td mat-cell *matCellDef="let row">{{row.currentBalance}}</td>
        </ng-container>

        <!-- Created Column -->
        <ng-container matColumnDef="email">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                Email
            </th>
            <td mat-cell *matCellDef="let row">{{row.email}}</td>
        </ng-container>
         <!-- Created Column -->
         <ng-container matColumnDef="phoneNumber">
            <th mat-header-cell *matHeaderCellDef>
                Phone Number
            </th>
            <td mat-cell *matCellDef="let row">{{row.phoneNumber}}</td>
        </ng-container>
         <!-- Created Column -->
         <ng-container matColumnDef="accountStatus">
            <th mat-header-cell *matHeaderCellDef mat-sort-header >
               Account Status
            </th>
            <td mat-cell *matCellDef="let row">{{row.accountStatus}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

<mat-paginator [length]="resultsLength" [pageSize]="pageSize" style="margin-right: 20px;"></mat-paginator>

В моем TS я понимаю, что я вызываю слияние при сортировке, которая требуется для сортировки на стороне сервера. но я хочу сделать только сортировку на стороне клиента. 

export class ManageAccountsComponent implements OnInit, AfterViewInit {

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

constructor(private http: HttpClient) { }
dataSource: Account[] = [];
displayedColumns: string[] = ['accountNumber', 'accountTitle', 'currentBalance', 'email', 'phoneNumber', 'accountStatus'];
resultsLength = 0;
pageSize = 2;
isLoadingResults: boolean;
ngOnInit() {

}
ngAfterViewInit() {

    merge(this.sort.sortChange, this.paginator.page)
        .pipe(
            startWith({}),
            switchMap(() => {
                this.isLoadingResults = true;
                return this.http.get(this.getAccountsUrl());
            }),
            map(data => {
                this.isLoadingResults = false;
                this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
                this.resultsLength = data['@odata.count'];

                return data['value'];
            }),
            catchError((ex) => {
                this.isLoadingResults = false;
                return observableOf([]);
            })
        ).subscribe(data => this.dataSource = data);

}
getAccountsUrl() {
    const href = "https://localhost:44391/odata/Accounts?";
    if (this.paginator.pageIndex == 0) {
        var requestUrl = "";
        requestUrl =
            `${href}$top=${this.pageSize}&$count=true&$orderby=${this.sort.active + ' ' + this.sort.direction}`;

    } else {
        requestUrl =
            `${href}$top=${this.pageSize}&$skip=${this.pageSize}&$count=true&$orderby=${this.sort.active + ' ' + this.sort.direction}`;
    }
    return requestUrl;
}}

и модель выглядит следующим образом 

export interface Account {
accountNumber: string;
accountTitle: string;
currentBalance: string;
email: string;
phoneNumber: string;
accountStatus: string;

}

ОБНОВЛЕНИЕ

Я преобразовал источник данных в 

  dataSource: MatTableDataSource<Account>

и удалил сортировку из слияния и сортировки заполненного источника данных после загрузки данных 

  ).subscribe(data => {
    this.dataSource = data;
    this.dataSource.sort = this.sort;
  });

, но не сработал.

1 Ответ

0 голосов
/ 23 февраля 2020

я преобразовал источник данных в MatTableDataSource и удалил сортировку из слияния и сортировки заполненного источника данных после загрузки данных 

  ).subscribe(data => {
 this.dataSource = new MatTableDataSource(data);
this.dataSource.sort = this.sort;  });

проблема заключалась в том, что я не делал new MatTableDataSource при назначении к источнику данных.

...