Как реализовать (сортировать, разбить на страницы) для Angular Таблица материалов, которая извлекает данные через Rest API (JSON)? - PullRequest
Новая
       26

Как реализовать (сортировать, разбить на страницы) для Angular Таблица материалов, которая извлекает данные через Rest API (JSON)?

1 голос
/ 08 января 2020

У меня есть эта таблица материалов, в которой отображаются данные из URL JSON через Rest API. Теперь я хочу использовать метод сортировки \ разбивки на таблицы материалов, но не могу пройти через это. Ниже приведены скриншоты. Как соотнести MatTableDataSource и UserDataSource вместе? Я хочу придерживаться Observable. Пожалуйста, сообщите, я новичок в Angular.

Component.ts 

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

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>

Сервис -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 )


  }
}

1 Ответ

0 голосов
/ 08 января 2020

MatTableDataSource - это источник данных, который принимает массив данных на стороне клиента и включает встроенную поддержку фильтрации, сортировки (используя MatSort) и разбиения на страницы (используя MatPaginator). Класс MatTableDataSource расширяет абстрактный класс DataSource, поэтому нет необходимости предоставлять пользовательскую реализацию, как вы собираетесь делать с UserDataSource.

Поэтому избавьтесь от UserDataSource и переписайте свой TablefilterComponent следующим образом. 

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

Пожалуйста, посмотрите на следующее StackBlitz

...