Настройка нумерации страниц для угловых материалов

Question

Я ввел нумерацию страниц и следовал инструкциям .

Вот мой файл 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
      );
  }

...