Как установить angular таблицу данных материала с разбивкой на страницы (источник данных) для массива данных, извлеченного из базы данных с помощью веб-API

Question

Я работаю над веб-приложением. Для разработки приложения я использую Angular и веб-API, СУБД: SQL Server Management Studio 17.

Я хочу заполнить данные, хранящиеся в моей базе данных, в Angular таблице данных материала.

Это мой customer-req-table-datasource.ts.

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';

// TODO: Replace this with your own data model type
export interface CustomerReqTableItem {
  name: string;
  id: number;
}

// TODO: replace this with real data from your application
const EXAMPLE_DATA: CustomerReqTableItem[] = [

  {id: 1, name: 'Hydrogen'},
  {id: 2, name: 'Helium'},
  {id: 3, name: 'Lithium'},
  {id: 4, name: 'Beryllium'},
  {id: 5, name: 'Boron'},
  {id: 6, name: 'Carbon'},
  {id: 7, name: 'Nitrogen'},
  {id: 8, name: 'Oxygen'},
  {id: 9, name: 'Fluorine'},
  {id: 10, name: 'Neon'},
  {id: 11, name: 'Sodium'},
  {id: 12, name: 'Magnesium'},
  {id: 13, name: 'Aluminum'},
  {id: 14, name: 'Silicon'},
  {id: 15, name: 'Phosphorus'},
  {id: 16, name: 'Sulfur'},
  {id: 17, name: 'Chlorine'},
  {id: 18, name: 'Argon'},
  {id: 19, name: 'Potassium'},
  {id: 20, name: 'Calcium'},
];

Это мой файл customer.service.ts

import { HttpClient } from '@angular/common/http';
import { Employee } from './employee.model';
import { Customer } from './customer.model';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CustomerService {

  formData: Customer;
  list: Customer[];
  readonly rootURL = 'https://localhost:44300/api';
  constructor(private http: HttpClient) { }

  postCustomer(formData: Customer) {
   return this.http.post(this.rootURL + '/Customer', formData);
  }

  refreshList() {
    this.http.get(this.rootURL + '/Customer').toPromise().then(res => this.list = res as Customer[]);
  }

  putCustomer(formData: Customer) {
    return this.http.put(this.rootURL + '/Customer/' + formData.CustomerID, formData);
   }

   deleteCustomer(id: number) {
     return this.http.delete(this.rootURL + '/Customer/' + id);
   }

}

Проблема: Как установить массив list [] (в service.ts файл) и заполнить таблицу данных angular?

Однако моя конечная цель - получить данные в базе данных и отобразить эти данные, используя таблицу данных angular.

Answer 1

Это самый простой способ решить вашу проблему. Теперь давайте создадим таблицу материалов с использованием mat-table , matColumnDef , matHeaderCellDef , matCellDef и matRowDef .

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

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

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

У нас определен каркас таблицы данных, теперь мы должны предоставить ему данные, и данные предоставляются с помощью источника данных и имени источника данных, который мы уже предоставили в [источнике данных ] в мат-таблице. Теперь мы отправим sh данные в источник данных в app.component.ts Ниже приведена реализация.

import { Component } from '@angular/core';
import {MatTableDataSource} from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
export class AppComponent {
  displayedColumns = ['id', 'name'];
  dataSource = new MatTableDataSource(EXAMPLE_DATA);
}

export interface CustomerReqTableItem {
  name: string;
  id: number;
}

const EXAMPLE_DATA: CustomerReqTableItem[] = [

  {id: 1, name: 'Hydrogen'},
  {id: 2, name: 'Helium'},
  {id: 3, name: 'Lithium'}
];

Чтобы включить нумерацию страниц, angular предоставляет mat- paginator директива, которая принимает необходимый параметр для разбивки на страницы. Эта директива должна быть помещена после директивы mat-table . Но прежде чем использовать эту директиву, нам нужно импортировать MatPaginatorModule в нашем material.module.ts. Ниже приведен пример.

<mat-paginator [length]="5" [pageSize]="3" [pageSizeOptions]="[5, 10, 25]">
  </mat-paginator>

Здесь длина - это общее число. из строк, pageSize это номер. строк, отображаемых в одном табличном представлении (по умолчанию 50), а pageSizeOptions позволяет переключаться между нет. строк, отображаемых в одном табличном представлении. Кроме того, нам нужно настроить paginator в нашем файле .ts для автоматического прослушивания изменений страницы, сделанных пользователем после запуска просмотра страницы.

export class AppComponent implements AfterViewInit{
.
.
 @ViewChild(MatPaginator) paginator: MatPaginator;

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