如何将带有分页（数据源）的角度材料数据表设置为使用 web-API 从数据库中检索到的数据数组

Question

我正在开发一个基于 Web 的应用程序。我使用 Angular 和 Web API 开发应用程序，DBMS：SQL Server Management Studio 17。

我想在 Angular Material 数据表中填充存储在我的数据库中的数据。

这是我的 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文件中）数据并填充角度数据表？

但是，我的最终目标是获取数据库中的数据并使用角度数据表显示这些数据。

Answer 1

这是可以解决您的问题的最简单方法。现在让我们使用 ma​​t-table、ma​​tColumnDef、ma​​tHeaderCellDef、ma​​tCellDef 和 ma​​tCellDef 创建一个材质表强>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>

我们已经定义了数据表的骨架，现在我们必须向它提供数据，并且数据是在 datasource 的帮助下提供的，并且我们已经在 mat-table 的 [datasource] 中提供了数据源的名称。现在我们将数据推送到 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 提供了 ma​​t-paginator 指令，该指令接受执行分页所需的参数。该指令应放在 ma​​t-table 指令之后。但是在使用这个指令之前，我们需要在我们的material.module.ts中引入MatPaginatorModule。下面是一个例子。

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

这里，长度是总数。行数，pageSize 是第一个。在单个表视图中显示的行数（默认为 50）和 pageSizeOptions 启用 no.在单个表视图中显示的行数。 此外，我们需要在 .ts 文件中配置分页器，以便在启动页面视图后自动监听用户所做的页面更改。

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

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