ホームページ > ウェブフロントエンド > jsチュートリアル > Angular マテリアルを使用して統計テーブルを作成する方法について話しましょう

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

青灯夜游
リリース: 2022-07-01 20:20:28
転載
2463 人が閲覧しました

Angular マテリアルを使用して統計テーブルを作成するにはどうすればよいですか?次の記事では、angular マテリアルを使って統計表を作成する方法を紹介しますので、ご参考になれば幸いです。

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

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

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

ng add @angular/material
ログイン後にコピー

テーブル スケマティックは、並べ替え可能でページング可能なデータ ソースで事前に構築された Angular マテリアルをレンダリングするコンポーネントを作成します。 [推奨関連チュートリアル: "angular チュートリアル"]

ng generate @angular/material:table texe1
ログイン後にコピー

次に、これに基づいて修正を加えます。

このコンポーネントの HTML ファイル

<div class="mat-elevation-z8">
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>序号</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>	岩土名</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-container>

    <!-- num1 Column -->
    <ng-container matColumnDef="num1">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>	期望数量</th>
      <td mat-cell *matCellDef="let row">{{row.num1}}</td>
    </ng-container>

    <!-- num2 Column -->
    <ng-container matColumnDef="num2">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>	当前数量</th>
      <td mat-cell *matCellDef="let row">{{row.num2}}</td>
    </ng-container>



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

  <!-- 控制表格数据的显示长度 -->
  <mat-paginator #paginator
      [length]="dataSource?.data?.length"
      [pageIndex]="0"
      [pageSize]="10"
      [pageSizeOptions]="[5, 10, 17]"
      aria-label="Select page">
  </mat-paginator>
</div>
ログイン後にコピー

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

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

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

// TODO: replace this with real data from your application
const EXAMPLE_DATA: Texe1Item[] = [
  {id: 1, name: &#39;粉质粘土&#39;, num1:1000, num2:100,},
  {id: 2, name: &#39;淤泥质粉质粘土&#39;, num1:1000, num2:100,},
  {id: 3, name: &#39;粘土&#39;, num1:1000, num2:100,},
  {id: 4, name: &#39;粘质粉土&#39;, num1:1000, num2:100,},
  {id: 5, name: &#39;淤泥质粘土&#39;, num1:1000, num2:100,},
  {id: 6, name: &#39;圆砾(角砾)&#39;, num1:1000, num2:100,},
  {id: 7, name: &#39;中砂&#39;, num1:1000, num2:1000,},
  {id: 8, name: &#39;有机质土&#39;, num1:1000, num2:100,},
  {id: 9, name: &#39;泥炭质土A&#39;, num1:1000, num2:100,},
  {id: 10, name: &#39;泥炭质土B&#39;, num1:1000, num2:100,},
  {id: 11, name: &#39;砂质粉土&#39;, num1:1000, num2:100,},
  {id: 12, name: &#39;粉砂&#39;, num1:1000, num2:100,},
  {id: 13, name: &#39;细砂&#39;, num1:1000, num2:100,},
  {id: 14, name: &#39;粗砂&#39;, num1:1000, num2:100,},
  {id: 15, name: &#39;砾砂&#39;, num1:1000, num2:100,},
  {id: 16, name: &#39;卵石(碎石)&#39;, num1:1000, num2:100,},
  {id: 17, name: &#39;漂石(块石)&#39;, num1:1000, num2:100,},

];

/**
 * Data source for the Texe1 view. This class should
 * encapsulate all logic for fetching and manipulating the displayed data
 * (including sorting, pagination, and filtering).
 */
export class Texe1DataSource extends DataSource<Texe1Item> {
  data: Texe1Item[] = EXAMPLE_DATA;
  paginator: MatPaginator | undefined;
  sort: MatSort | undefined;

  constructor() {
    super();
  }

  /**
   * Connect this data source to the table. The table will only update when
   * the returned stream emits new items.
   * @returns A stream of the items to be rendered.
   */
  connect(): Observable<Texe1Item[]> {
    if (this.paginator && this.sort) {
      // Combine everything that affects the rendered data into one update
      // stream for the data-table to consume.
      return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
        .pipe(map(() => {
          return this.getPagedData(this.getSortedData([...this.data ]));
        }));
    } else {
      throw Error(&#39;Please set the paginator and sort on the data source before connecting.&#39;);
    }
  }

  /**
   *  Called when the table is being destroyed. Use this function, to clean up
   * any open connections or free any held resources that were set up during connect.
   */
  disconnect(): void {}

  /**
   * Paginate the data (client-side). If you&#39;re using server-side pagination,
   * this would be replaced by requesting the appropriate data from the server.
   */
  private getPagedData(data: Texe1Item[]): Texe1Item[] {
    if (this.paginator) {
      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
      return data.splice(startIndex, this.paginator.pageSize);
    } else {
      return data;
    }
  }

  /**
   * Sort the data (client-side). If you&#39;re using server-side sorting,
   * this would be replaced by requesting the appropriate data from the server.
   */
  private getSortedData(data: Texe1Item[]): Texe1Item[] {
    if (!this.sort || !this.sort.active || this.sort.direction === &#39;&#39;) {
      return data;
    }

    return data.sort((a, b) => {
      const isAsc = this.sort?.direction === &#39;asc&#39;;
      switch (this.sort?.active) {
        case &#39;name&#39;: return compare(a.name, b.name, isAsc);
        case &#39;id&#39;: return compare(+a.id, +b.id, isAsc);
        default: return 0;
      }
    });
  }
}

/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
function compare(a: string | number, b: string | number, isAsc: boolean): number {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
ログイン後にコピー

このコンポーネントの texe1.component.ts ファイル

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

@Component({
  selector: &#39;app-texe1&#39;,
  templateUrl: &#39;./texe1.component.html&#39;,
  styleUrls: [&#39;./texe1.component.css&#39;]
})
export class Texe1Component implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatTable) table!: MatTable<Texe1Item>;
  dataSource: Texe1DataSource;

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = [&#39;id&#39;, &#39;name&#39;,&#39;num1&#39;,&#39;num2&#39;];

  constructor() {
    this.dataSource = new 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>
ログイン後にコピー

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

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 !

以上がAngular マテリアルを使用して統計テーブルを作成する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート