Добавить пагинатор и фильтр в мой пользовательский источник данных в angular - PullRequest
Новая
       3

Добавить пагинатор и фильтр в мой пользовательский источник данных в angular

1 голос
/ 06 мая 2020

У меня была таблица с работающей фильтрацией и рабочим пагинатором. Это код, который у меня был:

user.component.ts 

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

export interface User {
  userName: string;
  companyId: number;
}

const ELEMENT_DATA: myUsers[] = [
  {
    userName: 'bla bla',
    companyId: 1,
  },
  {
    userName: 'test test',
    companyId: 25,
  },
];

/**
 * @title Table with sticky header, filtering and pagination
 */
@Component({
  selector: 'app-user',
  styleUrls: ['user.component.css'],
  templateUrl: 'user.component.html',
})
export class UserComponent implements OnInit {
  displayedColumns: string[] = ['userName', 'companyId'];
  dataSource = new MatTableDataSource<myUsers>(ELEMENT_DATA);

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

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

  public applyFilter = (value: string) => {
    this.dataSource.filter = value.trim().toLowerCase();
  };
}

user.component. html

<div>
  <mat-form-field>
    <mat-label>Filter</mat-label>
    <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Filter" />
  </mat-form-field>
</div>

<div mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <!-- userName Column -->
    <ng-container matColumnDef="userName ">
      <th mat-header-cell *matHeaderCellDef>userName </th>
      <td mat-cell *matCellDef="let element">{{ element.userName  }}</td>
    </ng-container>

    <!-- companyId Column -->
    <ng-container matColumnDef="companyId ">
      <th mat-header-cell *matHeaderCellDef>companyId </th>
      <td mat-cell *matCellDef="let element">{{ element.companyId }}</td>
    </ng-container>

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

  <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons> </mat-paginator>
</div>

user.component. css 

table {
  width: 100%;
}

, который отлично работает. Я хотел перейти к поддельному API, поэтому я последовал этому руководству и получил следующий код:

user.model.ts 

export interface User {
  userName: string;
  companyId: number;
}

user.service .ts 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../models/user.model';
@Injectable()
export class UserService {
  private serviceUrl = 'someFunctioningLinkWithJsonData';

  constructor(private http: HttpClient) { }

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

}

и, наконец, user.component.ts стал: 

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Observable, of } from 'rxjs';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/user.model';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  dataSource = new UserDataSource(this.userService);
  displayedColumns = ['userName', 'companyId'];
  constructor(private userService: UserService) { }

  ngOnInit() {
  }
}
export class UserDataSource extends DataSource<any> {
  constructor(private userService: UserService) {
    super();
  }
  connect(): Observable<User[]> {
    return this.userService.getUser();
  }
  disconnect() {}
}

, который отлично работает, и я очень рад, что мне удалось запустить и запустить поддельный API, но когда я пытаюсь вернуть пагинатор, как это 

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

, я получаю эту ошибку:

TS2339: свойство 'paginator' не существует для типа 'UserDataSource'

Что имеет смысл, поскольку MatTableDataSource есть, а я нет. У меня вопрос, как мне заставить работать пагинатор в моем случае? Прошло 3 дня и ничего не получается. Я пробовал расширить MatTableDataSource, но это не сработало.

...