Mari kita bahas tentang cara menggunakan Material sudut untuk membuat tabel statistik

Gunakan Material sudut untuk membuat tabel statistik.

Instal Material Angular, alat pengembangan komponen (CDK) dan pustaka animasi Angular, dan jalankan skema kode

dan tambahkan skema tabel @angular/material

untuk membuat komponen yang dapat membuat sortable preset, Angular Material untuk sumber data yang dapat dihalaman. [Rekomendasi tutorial terkait: "tutorial sudut"]

ng buat @angular/material:table texe1

lalu modifikasi berdasarkan ini.

File html komponen

<div class="mat-elevation-z8">
  <tabel mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- Kolom Id -->
    <ng-wadah matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>nomor seri</th>
      <td mat-cell *matCellDef="biarkan baris">{{row.id}}</td>
    </ng-wadah>

    <!-- Kolom Nama -->
    <ng-container matColumnDef="nama">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> nama batuan dan tanah</th>
      <td mat-cell *matCellDef="biarkan baris">{{row.name}}</td>
    </ng-wadah>

    <!-- angka1 Kolom -->
    <ng-wadah matColumnDef="num1">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> jumlah yang diharapkan</th>
      <td mat-cell *matCellDef="biarkan baris">{{row.num1}}</td>
    </ng-wadah>

    <!-- angka2 Kolom -->
    <ng-wadah matColumnDef="num2">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> nomor saat ini</th>
      <td mat-cell *matCellDef="biarkan baris">{{row.num2}}</td>
    </ng-wadah>



    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="biarkan baris; kolom: displayColumns;"></tr>
  </tabel>

  <!-- Mengontrol panjang tampilan data tabel-->
  <mat-paginator #paginator
      [panjang]="Sumber data?.data?.panjang"
      [indeks halaman]="0"
      [Ukuran halaman]="10"
      [pageSizeOptions]="[5, 10, 17]"
      aria-label="Pilih halaman">
  </mat-paginator>
</div>

File texe1-datasource.ts komponen

diimpor { DataSource } dari '@angular/cdk/collections';
impor { MatPaginator } dari '@angular/material/paginator';
impor { MatSort } dari '@angular/material/sort';
impor { peta } dari 'rxjs/operator';
import { Dapat diamati, seperti yang dapat diamati, digabungkan } dari 'rxjs';

// TODO: Ganti ini dengan tipe model data Anda sendiri
ekspor antarmuka Texe1Item {
  nama: tali;
  nomor identitas: nomor;
  nomor1: nomor;
  nomor2: nomor;
}

// TODO: ganti ini dengan data asli dari aplikasi Anda
const CONTOH_DATA: Texe1Item[] = [
  {id: 1, nama: 'tanah liat berlumpur', angka1:1000, angka2:100,},
  {id: 2, nama: 'tanah liat berlanau', angka1:1000, angka2:100,},
  {id: 3, nama: 'Tanah Liat', angka1:1000, angka2:100,},
  {id: 4, nama: 'Lumpur liat', angka1:1000, angka2:100,},
  {id: 5, nama: 'tanah liat berlumpur', angka1:1000, angka2:100,},
  {id: 6, nama: 'Breksia (breksi)', angka1:1000, angka2:100,},
  {id: 7, nama: '中沙', angka1:1000, angka2:1000,},
  {id: 8, nama: 'Tanah organik', angka1:1000, angka2:100,},
  {id: 9, nama: 'Tanah gambut A', angka1:1000, angka2:100,},
  {id: 10, nama: 'Tanah gambut B', angka1:1000, angka2:100,},
  {id: 11, nama: 'Lumpur berpasir', angka1:1000, angka2:100,},
  {id: 12, nama: 'pasir lanau', angka1:1000, angka2:100,},
  {id: 13, nama: 'pasir halus', angka1:1000, angka2:100,},
  {id: 14, nama: 'pasir kasar', angka1:1000, angka2:100,},
  {id: 15, nama: 'Kerikil', angka1:1000, angka2:100,},
  {id: 16, nama: 'Kerikil (kerikil)', angka1:1000, angka2:100,},
  {id: 17, nama: 'Boulder (batu besar)', angka1:1000, angka2:100,},

];

/**
 * Sumber data untuk tampilan Texe1 seharusnya
 * merangkum semua logika untuk mengambil dan memanipulasi data yang ditampilkan
 * (termasuk pengurutan, penomoran halaman, dan pemfilteran).
 */
kelas ekspor Texe1DataSource memperluas DataSource<Texe1Item> {
  data: Texe1Item[] = EXAMPLE_DATA;
  paginator: MatPaginator |.tidak terdefinisi;
  urutkan: MatSort |.

  konstruktor() {
    super();
  }

  /**
   * Hubungkan sumber data ini ke tabel. Tabel hanya akan diperbarui bila
   * aliran yang dikembalikan mengeluarkan item baru.
   * @returns Aliran item yang akan dirender.
   */
  connect(): Dapat Diamati<Texe1Item[]> {
    if (ini.paginator && ini.sortir) {
      // Gabungkan semua yang memengaruhi data yang dirender menjadi satu pembaruan
      // streaming untuk digunakan oleh tabel data.
      kembalikan penggabungan(observableOf(ini.data), ini.halaman paginator, ini.sort.sortChange)
        .pipa(peta(() => {
          kembalikan ini.getPagedData(ini.getSortedData([...ini.data ]));
        }));
    } kalau tidak {
      throw Error('Silakan atur paginator dan urutkan berdasarkan sumber data sebelum menghubungkan.');
    }
  }

  /**
   * Dipanggil ketika tabel sedang dihancurkan. Gunakan fungsi ini, untuk membersihkan
   * semua koneksi terbuka atau bebaskan semua sumber daya yang disimpan yang disiapkan selama koneksi.
   */
  putuskan(): batal {}

  /**
   * Buat paginasi data (sisi klien).
   * ini akan diganti dengan meminta data yang sesuai dari server.
   */
  getPagedData pribadi(data: Texe1Item[]): Texe1Item[] {
    if (ini.paginator) {
      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
      return data.splice(startIndex, this.paginator.pageSize);
    } kalau tidak {
      mengembalikan data;
    }
  }

  /**
   * Urutkan data (sisi klien).
   * ini akan diganti dengan meminta data yang sesuai dari server.
   */
  getSortedData pribadi(data: Texe1Item[]): Texe1Item[] {
    if (!this.sort || !this.sort.active || this.sort.direction === '') {
      mengembalikan data;
    }

    kembalikan data.sort((a, b) => {
      const isAsc = this.sort?.direction === 'asc';
      beralih (ini.sortir?.aktif) {
        kasus 'nama': kembali bandingkan(a.nama, b.nama, isAsc);
        case 'id': return bandingkan(+a.id, +b.id, isAsc);
        default: mengembalikan 0;
      }
    });
  }
}

/** Pembanding pengurutan sederhana misalnya kolom ID/Nama (untuk pengurutan sisi klien).
fungsi perbandingan(a: string | angka, b: string | angka, isAsc: boolean): angka {
  kembali (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

File texe1.component.ts komponen

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

@Komponen({
  pemilih: 'app-texe1',
  templateUrl: './texe1.component.html',
  styleUrls: ['./texe1.component.css']
})
kelas ekspor Texe1Component mengimplementasikan AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sortir!: MatSort;
  @ViewChild(MatTable) tabel!: MatTable<Texe1Item>;
  Sumber data: Texe1DataSource;

  /** Kolom yang ditampilkan dalam tabel. ID Kolom dapat ditambahkan, dihapus, atau disusun ulang */
  ditampilkanKolom = ['id', 'nama','angka1','angka2'];

  konstruktor() {
    this.dataSource = Texe1DataSource();
  }

  ngAfterViewInit(): batal {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = ini.paginator;
    this.table.dataSource = ini.dataSource;
  }
}

Terakhir, ditampilkan di file app.component.html.

<app-texe1></app-texe1>

Merender: