เรามาพูดถึงวิธีใช้วัสดุเชิงมุมเพื่อสร้างตารางทางสถิติกันดีกว่า

ใช้วัสดุเชิงมุมเพื่อสร้างตารางทางสถิติ

ติดตั้ง Angular Material เครื่องมือพัฒนาส่วนประกอบ (CDK) และไลบรารีแอนิเมชั่น Angular และเรียกใช้แผนผังโค้ด

ng เพิ่ม @ เชิงมุม/

แผนผังตารางวัสดุเพื่อสร้างส่วนประกอบที่สามารถแสดงผลการจัดเรียงที่ตั้งล่วงหน้าได้ วัสดุเชิงมุมสำหรับ แหล่งข้อมูลเพจได้ [คำแนะนำบทช่วยสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]

ng สร้าง @ เชิงมุม/วัสดุ: ตาราง texe1

แล้วแก้ไขตามสิ่งนี้

ไฟล์ html ขององค์ประกอบ

<div class="mat-elevation-z8">
  <table mat-table class = "เต็มความกว้างตาราง" matSort aria-label = "องค์ประกอบ">
    <!-- คอลัมน์รหัส -->
    <ng-คอนเทนเนอร์ matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>หมายเลขซีเรียล</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-ภาชนะ>

    <!-- คอลัมน์ชื่อ -->
    <ng-คอนเทนเนอร์ 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; columns: displaysColumns;"></tr>
  </ตาราง>

  <!-- ควบคุมความยาวของการแสดงข้อมูลตาราง-->
  <mat-paginator #paginator
      [length]="dataSource?.data?.length"
      [ดัชนีหน้า]="0"
      [ขนาดหน้า]="10"
      [pageSizeOptions]="[5, 10, 17]"
      aria-label = "เลือกหน้า">
  </mat-paginator>
</div>

ไฟล์ texe1-datasource.ts ของคอมโพเนนต์

นำเข้า { DataSource } จาก '@angular/cdk/collections';
นำเข้า { MatPaginator } จาก '@ เชิงมุม/วัสดุ/paginator';
นำเข้า { MatSort } จาก '@ เชิงมุม/วัสดุ/sort';
นำเข้า { map } จาก 'rxjs/operators';
นำเข้า { สังเกตได้ จากที่สังเกตได้ ผสาน } จาก 'rxjs';

// สิ่งที่ต้องทำ: แทนที่สิ่งนี้ด้วยประเภทโมเดลข้อมูลของคุณเอง
ส่งออกอินเทอร์เฟซ Texe1Item {
  ชื่อ: สตริง;
  รหัส: หมายเลข;
  num1: หมายเลข;
  num2: หมายเลข;
-

// สิ่งที่ต้องทำ: แทนที่สิ่งนี้ด้วยข้อมูลจริงจากแอปพลิเคชันของคุณ
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 ชื่อ: 'เบรชเซีย (เบรชเซีย)', 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 ชื่อ: 'ทรายตะกอน', 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 ชื่อ: 'กรวด (กรวด)', num1:1000, num2:100,},
  {id: 17 ชื่อ: 'โบลเดอร์ (โบลเดอร์)', num1:1000, num2:100,},

-

-
 * แหล่งข้อมูลสำหรับมุมมอง Texe1 คลาสนี้ควร
 * สรุปตรรกะทั้งหมดสำหรับการดึงและจัดการข้อมูลที่แสดง
 * (รวมถึงการเรียงลำดับ การแบ่งหน้า และการกรอง)
 -
คลาสส่งออก Texe1DataSource ขยาย DataSource<Texe1Item> {
  ข้อมูล: Texe1Item[] = EXAMPLE_DATA;
  เลขหน้า: MatPaginator | . ไม่ได้กำหนด;
  เรียงลำดับ: MatSort | . ไม่ได้กำหนด;

  ตัวสร้าง () {
    ซุปเปอร์();
  -

  -
   * เชื่อมต่อแหล่งข้อมูลนี้เข้ากับตาราง ตารางจะอัปเดตเมื่อเท่านั้น
   * สตรีมที่ส่งคืนปล่อยรายการใหม่
   * @returns กระแสของรายการที่จะแสดงผล
   -
  เชื่อมต่อ (): สังเกตได้ <Texe1Item[]> {
    ถ้า (this.paginator && this.sort) {
      // รวมทุกอย่างที่ส่งผลต่อข้อมูลที่แสดงผลไว้ในการอัปเดตเดียว
      // สตรีมเพื่อให้ตารางข้อมูลใช้งาน
      ส่งคืนการผสาน (observableOf (this.data), this.paginator.page, this.sort.sortChange)
        .pipe(แผนที่(() => {
          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 [] {
    ถ้า (!this.sort || !this.sort.active || this.sort.direction === '') {
      ส่งคืนข้อมูล
    -

    กลับ data.sort ((a, b) => {
      const isAsc = this.sort?.direction === 'asc';
      สวิตช์ (this.sort?.active) {
        กรณี 'ชื่อ': กลับเปรียบเทียบ (a.name, b.name, isAsc);
        case 'id': return comparison(+a.id, +b.id, isAsc);
        ค่าเริ่มต้น: กลับ 0;
      -
    -
  -
-

/** ตัวเปรียบเทียบการเรียงลำดับอย่างง่ายสำหรับตัวอย่างคอลัมน์ ID/ชื่อ (สำหรับการเรียงลำดับฝั่งไคลเอ็นต์) */
ฟังก์ชั่นเปรียบเทียบ (a: string | number, b: string | number, isAsc: boolean): number {
  กลับ (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

ไฟล์ texe1.component.ts ของส่วนประกอบ

{ AfterViewInit, Component, ViewChild } จาก '@ เชิงมุม/core';
นำเข้า { MatPaginator } จาก '@ เชิงมุม/วัสดุ/paginator';
นำเข้า { MatSort } จาก '@ เชิงมุม/วัสดุ/sort';
นำเข้า { MatTable } จาก '@ เชิงมุม/วัสดุ/ตาราง';
นำเข้า { Texe1DataSource, Texe1Item } จาก './texe1-datasource';

@ส่วนประกอบ({
  ตัวเลือก: 'app-texe1',
  templateUrl: './texe1.component.html',
  styleUrls: ['./texe1.component.css']
-
คลาสส่งออก Texe1Component ใช้ AfterViewInit {
  @ViewChild(MatPaginator) ตัวแบ่งหน้า!: MatPaginator;
  @ViewChild(MatSort) เรียงลำดับ!: MatSort;
  @ViewChild(MatTable) ตาราง!: MatTable<Texe1Item>;
  แหล่งข้อมูล: Texe1DataSource;

  /** คอลัมน์ที่แสดงในตารางสามารถเพิ่ม ลบ หรือเรียงลำดับใหม่ได้ */
  displaysColumns = ['id', 'ชื่อ','num1','num2'];

  ตัวสร้าง () {
    this.dataSource = Texe1DataSource ใหม่ ();
  -

  ngAfterViewInit(): เป็นโมฆะ {
    this.dataSource.sort = นี้.เรียงลำดับ;
    this.dataSource.paginator = this.paginator;
    this.table.dataSource = this.dataSource;
  -
}

สุดท้ายจะแสดงในไฟล์ app.component.html

<app-texe1></app-texe1>

การแสดงผล: