使用 http.get() 時 Angular 材料表排序不起作用

Question

在我嘗試使用 angular 材料表來顯示數據時，我發現當使用硬編碼的內聯 json 時，我的表按預期排序。 但是，當通過 http.get() 檢索 json 時，排序不再有效。

為說明此問題而創建的示例服務：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  constructor(private http: HttpClient) {}

  getDataHttp(): Observable<any> {
    return this.http.get('assets/data.json');
  }

  getDataInline(): Observable<any> {
    var data = [
      . . .
    ];
    return of(data);
  }
}

以及相應的表格組件：

import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css'],
})
export class TableComponent implements OnInit {
  @Input() name: string = '';
  displayedColumns = ['id', 'name', 'value'];
  dataSource: MatTableDataSource<any>;

  @ViewChild(MatSort) sort!: MatSort;

  constructor(private api: ApiService) {
    this.dataSource = new MatTableDataSource();
  }

  ngOnInit(): void {
    if (this.name === 'Inline') {
      this.api.getDataInline().subscribe((response) => {
        this.dataSource = new MatTableDataSource(response);
      });
    } else if (this.name === 'Http') {
      this.api.getDataHttp().subscribe((response) => {
        this.dataSource = new MatTableDataSource(response);
      });
    }
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }
}

和相應的視圖：

<div>
  <h5>{{ name }}</h5>
  <table mat-table [dataSource]="dataSource" matSort>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
      <td mat-cell *matCellDef="let row">{{ row.id }}</td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row">{{ row.name }}</td>
    </ng-container>

    <ng-container matColumnDef="value">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
      <td mat-cell *matCellDef="let row">{{ row.value }}</td>
    </ng-container>
  </table>
</div>

Stackblitz： https://stackblitz.com/edit/angular-ivy-qk3s2y

為什么排序適用於內聯表，但不適用於 http 表？

Answer 1

這個：

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
}

在 http-request 完成之前執行。 我們需要記住這是異步的，因此您應該在收到數據后設置排序：

  this.api.getDataHttp().subscribe((response) => {
    this.dataSource = new MatTableDataSource(response);
    this.dataSource.sort = this.sort; // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  });

堆棧閃電戰