Angular 11 Material DataSource，无需进一步请求服务器

基础概念

Angular Material 是一个基于 Angular 的 UI 组件库，旨在提供现成的 UI 组件，帮助开发者快速构建现代化的 Web 应用程序。DataSource 是 Angular Material 中的一个抽象类，用于处理表格和其他数据驱动的组件（如列表、卡片等）的数据源。

优势

数据绑定：DataSource 提供了与 Angular 的数据绑定机制无缝集成的能力，使得数据的更新能够自动反映在 UI 上。
分页和排序：DataSource 支持内置的分页和排序功能，简化了这些常见功能的实现。
虚拟滚动：对于大数据集，DataSource 支持虚拟滚动，只渲染可见部分的数据，提高性能。
自定义数据源：可以轻松创建自定义的 DataSource，以满足特定的数据需求。

类型

Angular Material 提供了几种内置的 DataSource 类型：

ArrayDataSource：从数组中获取数据。
HttpDataSource：通过 HTTP 请求从服务器获取数据。
PagingDataSource：支持分页的数据源。
SortingDataSource：支持排序的数据源。

应用场景

DataSource 适用于需要展示大量数据并进行交互的场景，例如：

电商网站的产品列表
社交媒体平台的时间线
企业级应用的数据报表

无需进一步请求服务器

如果你希望在 Angular 11 Material 中使用 DataSource 而不需要进一步请求服务器，可以使用 ArrayDataSource。以下是一个简单的示例：

import { Component } from '@angular/core';
import { ArrayDataSource } from '@angular/cdk/collections';

@Component({
  selector: 'app-root',
  template: `
    <mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="age">
        <th mat-header-cell *matHeaderCellDef> Age </th>
        <td mat-cell *matCellDef="let element"> {{element.age}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </mat-table>
  `,
})
export class AppComponent {
  displayedColumns: string[] = ['name', 'age'];
  dataSource = new ArrayDataSource([
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 35 },
  ]);
}