Давайте поговорим о том, как использовать Angular Material для создания статистических таблиц.

Используйте Angular Material для создания статистических таблиц.

Установите Angular Material, инструмент разработки компонентов (CDK) и библиотеку анимации Angular, а затем запустите схему кода

и добавьте схему таблицы @angular/material,

чтобы создать компонент, который может отображать предустановленный сортируемый материал Angular для. постраничные источники данных. [Рекомендация по соответствующему руководству: «Угловое руководство»]

ng сгенерируйте @angular/material:table texe1

, а затем измените ее на основе этого.

HTML-файл компонента

<div class="mat-elevation-z8">
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- Идентификатор столбца -->
    <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="name">
      <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; columns: displayColumns;"></tr>
  </таблица>

  <!-- Управление длиной отображения данных таблицы-->
  <mat-paginator #paginator
      [длина]="источник данных?.данные?.длина"
      [pageIndex]="0"
      [pageSize]="10"
      [pageSizeOptions]="[5, 10, 17]"
      aria-label="Выбрать страницу">
  </mat-пагинатор>
</div>

Файл texe1-datasource.ts компонента

import { DataSource } from '@angular/cdk/collections';
импортировать { MatPaginator } из '@angular/material/paginator';
импортировать { MatSort } из '@angular/material/sort';
импортировать {карту} из 'rxjs/operators';
импорт {Наблюдаемый, как observableOf, слияние} из 'rxjs';

// TODO: Замените это своим собственным типом модели данных
интерфейс экспорта Texe1Item {
  имя: строка;
  идентификатор: номер;
  номер1: номер;
  номер2: номер;
}

// TODO: заменить это реальными данными из вашего приложения
const EXAMPLE_DATA: Texe1Item[] = [
  {id: 1, имя: «илистая глина», num1:1000, num2:100,},
  {id: 2, name: 'илистая илистые глина', 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, name: 'Торфяная почва А', num1:1000, num2:100,},
  {id: 10, имя: 'Торфяная почва Б', 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: 'Галька (гравий)', num1:1000, num2:100,},
  {id: 17, имя: 'Боулдер (валун)', num1:1000, num2:100,},

];

/**
 * Источник данных для представления Texe1. Этот класс должен.
 * инкапсулировать всю логику для получения и управления отображаемыми данными
 * (включая сортировку, нумерацию страниц и фильтрацию).
 */
класс экспорта Texe1DataSource расширяет DataSource<Texe1Item> {
  данные: Texe1Item[] = EXAMPLE_DATA;
  разбиение на страницы: MatPaginator | не определено;
  сортировка: МатСорт | не определено;

  конструктор() {
    супер();
  }

  /**
   * Подключите этот источник данных к таблице. Таблица будет обновляться только тогда, когда.
   * возвращенный поток выдает новые элементы.
   * @returns Поток элементов, которые необходимо отобразить.
   */
  Connect(): Observable<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 [] {
    если (this.paginator) {
      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
      вернуть 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) {
        случай 'имя': return Compare(a.name, b.name, isAsc);
        случай 'id': return Compare(+a.id, +b.id, isAsc);
        по умолчанию: вернуть 0;
      }
    });
  }
}

/** Простой компаратор сортировки, например столбцы ID/Name (для сортировки на стороне клиента */).
функция сравнения (a: строка | число, b: строка | число, isAsc: логическое значение): число {
  return (a <b?-1:1) * (isAsc?1:-1);
}

Файл texe1.comComponent.ts компонента

import { AfterViewInit, Component, ViewChild } from '@angular/core';
импортировать { MatPaginator } из '@angular/material/paginator';
импортировать { MatSort } из '@angular/material/sort';
импортировать { MatTable } из '@angular/material/table';
импортировать { Texe1DataSource, Texe1Item } из './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;

  /** Идентификаторы столбцов, отображаемые в таблице, можно добавлять, удалять или переупорядочивать */.
  displayColumns = ['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.comComponent.html.

<app-texe1></app-texe1>

Рендеринг: