Angular Material을 사용하여 통계표를 만드는 방법에 대해 이야기해 보겠습니다.

Angle Material을 사용하여 통계 테이블을 만듭니다.

Angular Material, 구성 요소 개발 도구(CDK) 및 Angular 애니메이션 라이브러리를 설치하고 코드 회로도

ng add @angular/material

테이블 회로도를 실행하여 사전 설정된 정렬 가능한 Angular Material을 렌더링할 수 있는 구성 요소를 만듭니다. 페이징 가능한 데이터 소스. [관련 튜토리얼 추천: "angular 튜토리얼"]

ng는 @angular/material:table tex1을 생성한

후 이를 기반으로 수정합니다.

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

의 html 파일

  <table mat-table class="full-width-table" matSort aria-label="요소">
    <!-- ID 열 -->
    <ng-컨테이너 matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>일련 번호</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-컨테이너>

    <!-- 이름 열 -->
    <ng-container matColumnDef="이름">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 암석 및 토양 이름</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-컨테이너>

    <!-- num1 열 -->
    <ng-컨테이너 matColumnDef="num1">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 예상 수량</th>
      <td mat-cell *matCellDef="let row">{{row.num1}}</td>
    </ng-컨테이너>

    <!-- num2 열 -->
    <ng-컨테이너 matColumnDef="num2">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 현재 번호</th>
      <td mat-cell *matCellDef="let row">{{row.num2}}</td>
    </ng-컨테이너>



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

  <!-- 테이블 데이터 표시 길이 제어-->
  <매트 페이지네이터 #페이지네이터
      [길이]="데이터소스?.데이터?.길이"
      [페이지인덱스]="0"
      [페이지 크기]="10"
      [pageSizeOptions]="[5, 10, 17]"
      aria-label="페이지 선택">
  </mat-페이지네이터>
</div>

구성 요소의 texe1-datasource.ts 파일

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
'rxjs/operators'에서 { 지도 }를 가져옵니다.
import { Observable, of observableOf, merge } from 'rxjs';

// TODO: 이를 자신만의 데이터 모델 유형으로 바꿉니다.
내보내기 인터페이스 Texe1Item {
  이름: 문자열;
  아이디: 번호;
  num1: 숫자;
  num2: 숫자;
}

// TODO: 이를 애플리케이션의 실제 데이터로 바꿉니다.
const EXAMPLE_DATA: Texe1Item[] = [
  {id: 1, 이름: 'silty clay', num1:1000, num2:100,},
  {id: 2, 이름: 'silty silty clay', num1:1000, num2:100,},
  {id: 3, 이름: 'Clay', num1:1000, num2:100,},
  {id: 4, 이름: 'Clayy silt', num1:1000, num2:100,},
  {id: 5, 이름: 'silty clay', num1:1000, num2:100,},
  {id: 6, name: '각력암(breccia)', num1:1000, num2:100,},
  {id: 7, 이름: '中沙', num1:1000, num2:1000,},
  {id: 8, 이름: '유기농 토양', num1:1000, num2:100,},
  {id: 9, 이름: '이탄 토양 A', num1:1000, num2:100,},
  {id: 10, 이름: '이탄토 B', num1:1000, num2:100,},
  {id: 11, 이름: 'Sandy silt', 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: '자갈(자갈)', num1:1000, num2:100,},
  {id: 17, name: '볼더(bolder)', num1:1000, num2:100,},

];

/**
 * Texe1 뷰의 데이터 소스는 다음과 같습니다.
 * 표시된 데이터를 가져오고 조작하기 위한 모든 논리를 캡슐화합니다.
 * (정렬, 페이지 매김 및 필터링 포함)
 */
내보내기 클래스 Texe1DataSource는 DataSource<Texe1Item> {를 확장합니다.
  데이터: Texe1Item[] = EXAMPLE_DATA;
  페이지네이터: MatPaginator | 정의되지 않음;
  정렬: MatSort 정의되지 않음;

  생성자() {
    감독자();
  }

  /**
   * 이 데이터 소스를 테이블에 연결하면 테이블이 업데이트됩니다.
   * 반환된 스트림은 새 항목을 방출합니다.
   * @returns 렌더링할 항목의 스트림입니다.
   */
  연결(): 관찰 가능<Texe1Item[]> {
    if (this.paginator && this.sort) {
      // 렌더링된 데이터에 영향을 미치는 모든 것을 하나의 업데이트로 결합합니다.
      // 데이터 테이블이 소비할 스트림입니다.
      return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
        .pipe(map(() => {
          return this.getPagedData(this.getSortedData([...this.data ]));
        }));
    } 또 다른 {
      throw Error('연결하기 전에 페이지네이터를 설정하고 데이터 소스를 정렬하세요.');
    }
  }

  /**
   * 테이블이 삭제될 때 호출됩니다. 이 함수를 사용하여 정리합니다.
   * 열려 있는 모든 연결 또는 연결 중에 설정된 보유 리소스를 해제합니다.
   */
  연결 해제(): 무효 {}

  /**
   * 데이터 페이지 매기기(클라이언트 측)
   * 이는 서버에 적절한 데이터를 요청하여 대체됩니다.
   */
  개인 getPagedData(데이터: Texe1Item[]): Texe1Item[] {
    if (this.paginator) {
      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
      return data.splice(startIndex, this.paginator.pageSize);
    } 또 다른 {
      데이터를 반환합니다.
    }
  }

  /**
   * 데이터를 정렬합니다(클라이언트측). 서버측 정렬을 사용하는 경우
   * 이는 서버에 적절한 데이터를 요청하여 대체됩니다.
   */
  개인 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 '이름': return Compare(a.name, b.name, isAsc);
        케이스 'id': return Compare(+a.id, +b.id, isAsc);
        기본값: 0을 반환합니다.
      }
    });
  }
}

/** ID/이름 열의 간단한 정렬 비교기(클라이언트측 정렬용) */
함수 비교(a: 문자열 | 숫자, b: 문자열 | 숫자, isAsc: 부울): 숫자 {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

구성요소의 texe1.comComponent.ts 파일

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

@요소({
  선택기: 'app-texe1',
  templateUrl: './texe1.comComponent.html',
  styleUrls: ['./texe1.comComponent.css']
})
내보내기 클래스 Texe1Component는 AfterViewInit을 구현합니다.
  @ViewChild(MatPaginator) 페이지네이터!: MatPaginator;
  @ViewChild(MatSort) 정렬!: MatSort;
  @ViewChild(MatTable) 테이블!: MatTable<Texe1Item>;
  데이터소스: Texe1DataSource;

  /** 테이블에 표시되는 열 ID는 추가, 제거 또는 재정렬될 수 있습니다. */
  displayColumns = ['id', 'name','num1','num2'];

  생성자() {
    this.dataSource = new Texe1DataSource();
  }

  ngAfterViewInit(): 무효 {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    this.table.dataSource = this.dataSource;
  }
}

마지막으로 app.comComponent.html 파일에 표시됩니다.

<app-texe1></app-texe1>

렌더링: