如何为通过RESTAPI（JSON）检索数据的角度材质表实现（排序、分页）？

我有一个Material表，它通过RESTAPI显示JSON url中的数据。我现在想对物料表使用sort\pagination，但无法通过它。下面是截图。如何同时引用

MatTableDataSource

和

UserDataSource

？我想坚持使用

Observable

。请告诉我，我是新手

组件技术

    @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() {}
}

@组件({
选择器：“应用程序表筛选器”，
templateUrl:'./tablefilter.component.html'，
样式URL:['./tablefilter.component.scss']
})
导出类TablefilterComponent实现OnInit{
@ViewChild（MatSort，{static:true}）sort:MatSort；
显示的列：字符串[]=['name'，'email'，'phone'，'website'，'address']；
dataSource=新的UserDataSource（this.dataService）；
构造函数（私有数据服务：数据服务）{}
恩戈尼尼特（）{
}
}
导出类UserDataSource扩展了DataSource{
构造函数（专用数据服务：数据服务）{
超级（）；
}
connect（）：可观察{
返回此.dataService.fetchPosts（）；
}
断开连接（）{}
}

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>

电话
{{contacts.phone}
名称
{{contacts.name}
电子邮件
{{contacts.email}
网站
{{contacts.website}
地址
{{contacts.address.street}

服务-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 )


  }
}

从'@angular/core'导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
从“../models/Contacts.model”导入{Contacts}；
从“rxjs/operators”导入{map，tap}；
导入'rxjs/add/operator/map'；
@注射的({
providedIn:'根'
})
导出类数据服务{
私有服务URL=https://jsonplaceholder.typicode.com/users';
构造函数（私有http:HttpClient）{}
fetchPosts（）：可观察{
返回this.http.get（this.serviceUrl）
}
}

MatTableDataSource

是一种数据源，它接受客户端数据数组，并包括过滤、排序（使用

MatSort

）和分页（使用

MatPaginator

）的本机支持。类

MatTableDataSource

扩展了抽象类

DataSource

，因此不需要像您打算使用

UserDataSource

那样提供自定义实现

因此，请删除

UserDataSource

，并按如下方式重写

tablefilter组件

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;
    });
  }
}

导出类TablefilterComponent实现OnInit{
displayedColumns:string[]=['phone'，'name'，'email'，'website'，'address']；
数据源：MatTableDataSource；
@ViewChild（MatSort，{static:true}）sort:MatSort；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
构造函数（私有数据服务：数据服务）{}
恩戈尼尼特（）{
this.dataService.fetchPosts（）.subscribe（contacts=>{
this.dataSource=新MatTableDataSource（联系人）；
this.dataSource.sort=this.sort；
this.dataSource.paginator=this.paginator；
});
}
}

请查看以下内容
MatTableDataSource
是一种数据源，它接受客户端数据数组，并包括过滤、排序（使用
MatSort
）和分页（使用
MatPaginator
）的本机支持。类
MatTableDataSource
扩展了抽象类
DataSource
，因此不需要像您打算使用
UserDataSource
那样提供自定义实现

因此，请删除
UserDataSource
，并按如下方式重写
tablefilter组件

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;
    });
  }
}

导出类TablefilterComponent实现OnInit{
displayedColumns:string[]=['phone'，'name'，'email'，'website'，'address']；
数据源：MatTableDataSource；
@ViewChild（MatSort，{static:true}）sort:MatSort；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
构造函数（私有数据服务：数据服务）{}
恩戈尼尼特（）{
this.dataService.fetchPosts（）.subscribe（contacts=>{
this.dataSource=新MatTableDataSource（联系人）；
this.dataSource.sort=this.sort；
this.dataSource.paginator=this.paginator；
});
}
}

请查看以下内容
嗨，谢谢，它已经起作用了。由于对所有这些都不熟悉，我不得不问，为什么要将contacts.model.ts替换为contact.type.ts？type.ts与model.ts有何不同？@Sz2013:contacts.model.ts没有代码，我不得不为StackBlitz发明它。文件名无关紧要，只是口味的问题（对于包含
界面的文件，我使用
.type.ts
）。只是注意到我没有将contact.model.ts文件添加到屏幕截图中。非常感谢你的解释。嗨，谢谢，它起作用了。由于对所有这些都不熟悉，我不得不问，为什么要将contacts.model.ts替换为contact.type.ts？type.ts与model.ts有何不同？@Sz2013:contacts.model.ts没有代码，我不得不为StackBlitz发明它。文件名无关紧要，只是口味的问题（对于包含
界面的文件，我使用
.type.ts
）。只是注意到我没有将contact.model.ts文件添加到屏幕截图中。非常感谢你的解释。