Angular マテリアルを使用して統計テーブルを作成する方法について話しましょう

Angular マテリアルを使用して統計テーブルを作成します。Angular

マテリアル、コンポーネント開発ツール (CDK)、および Angular アニメーション ライブラリをインストールし、コード スケマティック

ng add @angular/material

table を実行して、プリセットの並べ替え可能な Angular マテリアルをレンダリングできるコンポーネントを作成します。ページング可能なデータ ソース。 [関連チュートリアルの推奨事項:「angular チュートリアル」]

@angular/material:table texe1 を生成し

、これに基づいて変更します。

コンポーネント

<div class="mat-elevation-z8">

  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- ID 列 -->
    <ng-container matColumnDef="id">
      <th mat-h​​eader-cell *matHeaderCellDef mat-sort-header>シリアル番号</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-コンテナ>

    <!-- 名前列 -->
    <ng-container matColumnDef="name">
      <th mat-h​​eader-cell *matHeaderCellDef mat-sort-header> 岩石と土壌の名前</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-コンテナ>

    <!-- num1 列 -->
    <ng-container matColumnDef="num1">
      <th mat-h​​eader-cell *matHeaderCellDef mat-sort-header> 予想数量</th>
      <td mat-cell *matCellDef="let row">{{row.num1}}</td>
    </ng-コンテナ>

    <!-- num2 列 -->
    <ng-container matColumnDef="num2">
      <th mat-h​​eader-cell *matHeaderCellDef mat-sort-header> 現在の番号</th>
      <td mat-cell *matCellDef="let row">{{row.num2}}</td>
    </ng-コンテナ>



    <tr mat-h​​eader-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr>
  </テーブル>

  <!-- テーブル データの表示長を制御します -->
  <mat-paginator #paginator
      [長さ]="データソース?.データ?.長さ"
      [ページインデックス]="0"
      [ページサイズ]="10"
      [pageSizeOptions]="[5、10、17]"
      aria-label="ページを選択">
  </mat-paginator>
</div>

コンポーネントの texe1-datasource.ts ファイル

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

// TODO: これを独自のデータ モデル タイプに置き換えます
エクスポート インターフェイス Texe1Item {
  名前: 文字列;
  ID: 番号;
  num1: 数値;
  num2: 数値;
}

// TODO: これをアプリケーションの実際のデータに置き換えます
const EXAMPLE_DATA: Texe1Item[] = [
  {id: 1, 名前: 'シルト粘土', num1:1000, num2:100,},
  {id: 2, 名前: 'シルトシルト粘土', num1:1000, num2:100,},
  {id: 3, 名前: '粘土', num1:1000, num2:100,},
  {id: 4, 名前: '粘土シルト', num1:1000, num2:100,},
  {id: 5, 名前: 'シルト粘土', num1:1000, num2:100,},
  {id: 6, name: 'ブレシア (角礫岩)', num1:1000, num2:100,},
  {id: 7, 名前: '中沙', num1:1000, num2:1000,},
  {id: 8, name: '有機土壌', num1:1000, num2:100,},
  {id: 9, 名前: '泥炭土 A', num1:1000, num2:100,},
  {id: 10, 名前: '泥炭土壌 B', num1:1000, num2:100,},
  {id: 11, 名前: 'サンディ シルト', num1:1000, num2:100,},
  {id: 12, 名前: 'シルト砂', num1:1000, num2:100,},
  {id: 13, 名前: '細かい砂', num1:1000, num2:100,},
  {id: 14, 名前: '粗い砂', num1:1000, num2:100,},
  {id: 15, 名前: '砂利', num1:1000, num2:100,},
  {id: 16, name: 'Pebble (砂利)', num1:1000, num2:100,},
  {id: 17, name: 'Boulder (ボルダー)', num1:1000, num2:100,},

];

/**
 * Texe1 ビューのデータ ソースは次のとおりです。
 * 表示されたデータを取得して操作するためのすべてのロジックをカプセル化します。
 * (並べ替え、ページネーション、フィルタリングを含む)。
 */
エクスポート クラス Texe1DataSource extends DataSource<Texe1Item> {
  データ: Texe1Item[] = EXAMPLE_DATA;
  ページネータ: MatPaginator 未定義;
  並べ替え: MatSort | 未定義;

  コンストラクター() {
    素晴らしい（）;
  }

  /**
   * このデータ ソースをテーブルに接続すると、テーブルが更新されます。
   * 返されたストリームは新しいアイテムを生成します。
   * @returns レンダリングされる項目のストリーム。
   */
  connect(): Observable<Texe1Item[]> {
    if (this.paginator && this.sort) {
      // レンダリングされたデータに影響を与えるすべてのものを 1 つの更新に結合します
      // 消費するデータテーブルのストリーム。
      return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
        .pipe(map(() => {
          return this.getPagesData(this.getSortedData([...this.data ]));
        }));
    } それ以外 {
      throw Error('接続する前にページネータを設定し、データ ソースで並べ替えてください。');
    }
  }

  /**
   * テーブルが破棄されるときに呼び出され、クリーンアップするためにこの関数を使用します。
   * 開いている接続、または接続中に設定された保持されているリソースを解放します。
   */
  切断(): void {}

  /**
   * データのページネーション (クライアント側) サーバー側のページネーションを使用している場合。
   * これは、サーバーから適切なデータをリクエストすることで置き換えられます。
   */
  private getPaggedData(データ: Texe1Item[]): Texe1Item[] {
    if (this.paginator) {
      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
      return data.splice(startIndex, this.paginator.pageSize);
    } それ以外 {
      データを返す。
    }
  }

  /**
   * サーバー側の並べ替えを使用している場合は、データを並べ替えます (クライアント側)。
   * これは、サーバーから適切なデータをリクエストすることで置き換えられます。
   */
  private getSortedData(データ: Texe1Item[]): Texe1Item[] {
    if (!this.sort || !this.sort.active || this.sort.direction === '') {
      データを返す。
    }

    return data.sort((a, b) => {
      const isAsc = this.sort?.direction === 'asc';
      スイッチ (this.sort?.active) {
        case 'name': return Compare(a.name, b.name, isAsc);
        case 'id': return Compare(+a.id, +b.id, isAsc);
        デフォルト: 0 を返します。
      }
    });
  }
}

/** ID/Name 列などの単純なソート コンパレータ (クライアント側のソート用) */
関数 Compare(a: 文字列 | 数値、b: 文字列 | 数値、isAsc: ブール値): 数値 {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
コンポーネント

の texe1.component.ts ファイル

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } から '@angular/material/paginator';
import { MatSort } から '@angular/material/sort';
import { MatTable } から '@angular/material/table';
import { Texe1DataSource, Texe1Item } から './texe1-datasource';

@成分（{
  セレクター: 'app-tex1',
  templateUrl: './texe1.component.html',
  styleUrls: ['./texe1.component.css']
})
エクスポート クラス Texe1Component は AfterViewInit を実装します {
  @ViewChild(MatPaginator) ページネーター!: MatPaginator;
  @ViewChild(MatSort) 並べ替え!: MatSort;
  @ViewChild(MatTable) テーブル!: MatTable<Texe1Item>;
  データソース: Texe1DataSource;

  /** テーブルに表示される列 ID は追加、削除、または並べ替えることができます。
  selectedColumns = ['id', 'name','num1','num2'];

  コンストラクター() {
    this.dataSource = 新しい Texe1DataSource();
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    this.table.dataSource = this.dataSource;
  }
最後

に、app.component.html ファイルに表示されます。

<app-texe1></app-texe1>

レンダリング: