Angular Materialtable如何实现（排序，分页）通过RestAPI（JSON）获取数据？

Question

我有这个 Material table 显示从 JSON url 到 Rest API 的数据。我现在想在 material table 上使用 sort\pagination 但无法通过它。以下是屏幕截图。如何同时引用 MatTableDataSource 和 UserDataSource？我想坚持使用 Observable。请指教，我是Angular.

的新手

Component.ts

    @Component({
  selector: 'app-tablefilter', 
  templateUrl: './tablefilter.component.html',
  styleUrls: ['./tablefilter.component.scss']
})
export class TablefilterComponent implements OnInit {

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

  displayedColumns: string[] = ['name','email','phone','website', 'address']; 
  dataSource = new UserDataSource(this.dataService );

  constructor(private dataService: DataService) {}



  ngOnInit() {
  }

}

export class UserDataSource extends DataSource<any> {
  constructor(private dataService: DataService) {
    super();
  }
  connect(): Observable<Contacts[]> {
    return this.dataService.fetchPosts();
  }
  disconnect() {}
}

HTML

    <table mat-table matSort  class="mat-elevation-z8" [dataSource]="dataSource">
    <ng-container matColumnDef="phone">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> phone
             </th>
        <td mat-cell *matCellDef="let contacts">{{contacts.phone}}  </td>
      </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> name </th>
      <td mat-cell *matCellDef="let contacts"> {{contacts.name}} </td>
    </ng-container>

    <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef> email </th>
        <td mat-cell *matCellDef="let contacts"> {{contacts.email}} </td>
      </ng-container>

      <ng-container matColumnDef="website">
        <th mat-header-cell *matHeaderCellDef> website </th>
        <td mat-cell *matCellDef="let contacts"> {{contacts.website}} </td>
      </ng-container>


      <ng-container matColumnDef="address">
        <th mat-header-cell *matHeaderCellDef> address </th>
        <td mat-cell *matCellDef="let contacts"> {{contacts.address.street}} </td>
      </ng-container>

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

服务-data.service.ts

    import { Injectable } from '@angular/core';
import{ Observable } from 'rxjs/observable';
import { HttpClient } from '@angular/common/http';
import {Contacts} from '../models/contacts.model';
import { map, tap } from 'rxjs/operators';

import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class DataService {

   private serviceUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor( private http: HttpClient ) { }


  fetchPosts(): Observable<Contacts[]> {
    return this.http.get<Contacts[]>(this.serviceUrl )


  }
}

Answer 1

MatTableDataSource 是一个接受客户端数据数组的数据源，包括对过滤、排序（使用 MatSort）和分页（使用 MatPaginator）的原生支持。 Class MatTableDataSource 扩展了抽象 class DataSource，因此无需像您打算使用 UserDataSource 那样提供自定义实现。

因此，去掉 UserDataSource 并重写你的 TablefilterComponent 如下。

export class TablefilterComponent implements OnInit {
  displayedColumns: string[] = ['phone', 'name', 'email', 'website', 'address']; 
  dataSource: MatTableDataSource<Contact>; 

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

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.fetchPosts().subscribe(contacts => {
       this.dataSource = new MatTableDataSource(contacts);
       this.dataSource.sort = this.sort;
       this.dataSource.paginator = this.paginator;
    });
  }
}

请看下面StackBlitz

Angular Materialtable如何实现（排序，分页）通过RestAPI（JSON）获取数据？

How to implement (sort, pagination) for Angular Material table which retrieves data through Rest API (JSON)?

sorting

json

rxjs

angular-material

mat-tab