角材料 MatTableDataSource 服务器端分页不起作用

Question

我是 Angular 的新手，我正在尝试使用带有分页和排序的材料表。所以，最初我尝试分页。我坚持这个错误。有没有人帮我分页。

错误是：

类型 '() 上不存在属性 'subscribe' => 可观察的'。

servertable.component.ts

import { Component, OnInit, AfterContentInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { UserService } from './user.service';
import { IUser } from './model/IUser';

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

  dataSource: any;
  users: IUser[];
  displayedColumns = ['name', 'email', 'phone', 'company'];      

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private service: UserService) { }

  ngOnInit() {
    this.service.getUser.subscribe(results => this.users = results);
    console.dir(this.dataSource);
  }

  ngAfterContentInit() {
    this.dataSource = new MatTableDataSource(this.users);
    this.dataSource.paginator = this.paginator;
  }
}

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/observable';
import { IUser } from './model/IUser';

@Injectable()
export class UserService {

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

  constructor(private http: HttpClient) { }

  getUser(): Observable<IUser[]> {
    return this.http.get<IUser[]>(this.serviceUrl);
  }
}

servertable.component.html

<div>
  <mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> E-Mail </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="phone">
      <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="company">
      <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.company.name}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Answer 1

您没有调用您的服务方法：this.service.getUser.subscribe(results => this.users = results);。您忘记在 getUser 上添加括号。

改成：this.service.getUser().subscribe(results => this.users = results);

还有一个问题：this.users 在ngAfterContentInit 中尚不可用，因为getUser() 调用是异步的。将表的分配移至您的 subscribe() 呼叫。整个ngOnInit() 将如下所示：

ngOnInit() {
    this.service.getUser().subscribe(results => {
        this.users = results;
        this.dataSource = new MatTableDataSource(this.users);
        this.dataSource.paginator = this.paginator;
    });
}