Question

我介绍了分页并遵循guides。

这是我的app.component.ts文件-

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import { ApiServicefile, User } from './api.service';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  //providers: [ ApiServicefile ],
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  error: any;
  title = 'toms-app';
  //users: User;
  users = new MatTableDataSource<User>();
  displayedColumns: string[] = ['firstName', 'lastName', 'username', 'email'];

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

constructor(private apiServicefile: ApiServicefile) { }


ngOnInit(): void {
  this.apiServicefile.getUser()
    .subscribe(
      (data: User) => this.users = data, // success path
      error => this.error = error // error path
    );
}

ngAfterViewInit(){
  this.users.paginator = this.paginator;
} 

}

在HTML文件中，材料表以前是由users: User

填充的

<table mat-table [dataSource]="users">

我现在在this.users的这一行引入了一个错误：

(data: User) => this.users = data, // success path

ERROR in src/app/app.component.ts(27,23): error TS2322: Type 'User' is not assignable to type 'MatTableDataSource<User>'.
    src/app/app.component.ts(27,23): error TS2740: Type 'User' is missing the following properties from type 'MatTableDataSource<User>': _data, _renderData, _filter, _internalPageChanges, and 18 more.

不知道我在这里做错了什么，尝试了各种尝试。

更新（更改为TS文件，不再出现错误，但分页不起作用）：

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import { ApiServicefile, User } from './api.service';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  //providers: [ ApiServicefile ],
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  error: any;
  title = 'toms-app';
  users: User;
  dataSource = new MatTableDataSource<User>();
  displayedColumns: string[] = ['firstName', 'lastName', 'username', 'email'];

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

constructor(private apiServicefile: ApiServicefile) { }


ngOnInit(): void {
  this.apiServicefile.getUser()
    .subscribe(
      (data: User) => this.users = data, // success path
      error => this.error = error // error path
    );
}

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

}

Answer 1

将所有用户引用标记为数组<User[]>可以达到目的。但是我在error中丢失了ngOnInit()的使用：

//error => this.error = error, // error path

上面有什么想法吗？

分页的答案如下：

app.component.ts-

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import { ApiServicefile, User } from './api.service';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  //providers: [ ApiServicefile ],
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  error: any;
  dataSource: any;
  title = 'toms-app';
  users: User[];
  displayedColumns: string[] = ['firstName', 'lastName', 'username', 'email'];

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

constructor(private apiServicefile: ApiServicefile) { }


ngOnInit(): void {
  this.apiServicefile.getUser()
    .subscribe(
      (data: User[]) => {
        this.users = data; // success path
      //error => this.error = error, // error path
      this.dataSource = new MatTableDataSource(this.users);
      this.dataSource.paginator = this.paginator;
      });
}

}

app.service.ts-

...

@Injectable()
export class ApiServicefile {
  userUrl = 'http://localhost:3000/users/20';

  constructor(private http: HttpClient) {}

  getUser() {
    return this.http.get<User[]>(this.userUrl)
      .pipe(
        retry(3), // retry a failed request up to 3 times
        catchError(this.handleError) // then handle the error
      );
  }

...

Angular Material问题的分页配置

1 个答案: