دعونا نتحدث عن كيفية استخدام المواد الزاوية لعمل جداول إحصائية

استخدم angular Material لإنشاء جداول إحصائية.

قم بتثبيت Angular Material وأداة تطوير المكونات (CDK) ومكتبة الرسوم المتحركة Angular، وقم بتشغيل الكود التخطيطي

ng add @angular/material

table schematic لإنشاء مكون يمكنه تقديم مادة Angular قابلة للفرز مسبقًا لـ مصادر البيانات القابلة للصفحات. [توصية البرنامج التعليمي ذات الصلة: "البرنامج التعليمي الزاوي"]

قم بإنشاء @angular/material:table texe1

ثم قم بتعديله بناءً على ذلك.

ملف html الخاص بالمكون

<div class="mat-elevation-z8">
  <جدول حصيرة الجدول فئة = "جدول كامل العرض" ماتفرز aria-label = "العناصر">
    <!-- عمود المعرف -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>الرقم التسلسلي</th>
      <td mat-cell *matCellDef="letrow">{{row.id}}</td>
    </ng-container>

    <!-- عمود الاسم -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> اسم الصخور والتربة</th>
      <td mat-cell *matCellDef="letrow">{{row.name}}</td>
    </ng-container>

    <!-- العمود رقم 1 -->
    <ng-container matColumnDef="num1">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> الكمية المتوقعة</th>
      <td mat-cell *matCellDef="letrow">{{row.num1}}</td>
    </ng-container>

    <!-- العمود رقم 2 -->
    <ng-container matColumnDef="num2">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> الرقم الحالي</th>
      <td mat-cell *matCellDef="letrow">{{row.num2}}</td>
    </ng-container>



    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let Row; الأعمدة: DisplayColumns;"></tr>
  </الجدول>

  <!-- التحكم في طول عرض بيانات الجدول-->
  <mat-paginator #paginator
      [طول]="مصدر البيانات?.البيانات?.الطول"
      [pageIndex]="0"
      [حجم الصفحة]="10"
      [pageSizeOptions]="[5، 10، 17]"
      aria-label = "اختر صفحة">
  </mat-paginator>
</div>

ملف texe1-datasource.ts للمكون

{ DataSource } من '@angular/cdk/collections'؛
استيراد { MatPaginator } من '@angular/material/paginator'؛
استيراد { MatSort } من '@angular/material/sort'؛
استيراد {خريطة} من 'rxjs/operators'؛
استيراد { يمكن ملاحظته، كما يمكن ملاحظته، دمج } من 'rxjs'؛

// TODO: استبدل هذا بنوع نموذج البيانات الخاص بك
واجهة التصدير Texe1Item {
  الاسم: سلسلة؛
  المعرف: رقم؛
  رقم 1: رقم؛
  رقم 2: رقم؛
}

// TODO: استبدل هذا ببيانات حقيقية من تطبيقك
const EXAMPLE_DATA: Texe1Item[] = [
  {المعرف: 1، الاسم: 'الطين الغريني'، العدد1:1000، العدد2:100،}،
  {المعرف: 2، الاسم: 'الطين الغريني الغريني'، رقم1:1000، رقم2:100،}،
  {المعرف: 3، الاسم: 'طين'، رقم 1: 1000، رقم 2: 100،}،
  {المعرف: 4، الاسم: 'طمي طين'، num1:1000، num2:100،}،
  {المعرف: 5، الاسم: 'الطين الغريني'، عدد1:1000، عدد2:100،}،
  {المعرف: 6، الاسم: 'بريشيا (بريشيا)'، num1:1000، num2:100،}،
  {المعرف: 7، الاسم: '中沙'، num1:1000، num2:1000،}،
  {المعرف: 8، الاسم: 'تربة عضوية'، رقم 1: 1000، رقم 2: 100،}،
  {المعرف: 9، الاسم: 'تربة الخث A'، num1:1000، num2:100،}،
  {المعرف: 10، الاسم: 'تربة الخث ب'، num1:1000، num2:100،}،
  {المعرف: 11، الاسم: 'الطمي الرملي'، num1:1000، num2:100،}،
  {المعرف: 12، الاسم: 'رمل الطمي'، رقم1:1000، رقم2:100،}،
  {المعرف: 13، الاسم: 'الرمال الناعمة'، العدد1:1000، العدد2:100،}،
  {المعرف: 14، الاسم: 'الرمال الخشنة'، رقم1:1000، رقم2:100،}،
  {المعرف: 15، الاسم: 'الحصى'، num1:1000، num2:100،}،
  {المعرف: 16، الاسم: 'حصاة (حصى)'، num1:1000، num2:100،}،
  {المعرف: 17، الاسم: 'بولدر (بولدر)'، num1:1000، num2:100،}،

];

/**
 * يجب أن يكون مصدر البيانات لعرض Texe1
 * تغليف كل المنطق لجلب البيانات المعروضة ومعالجتها
 * (بما في ذلك الفرز، وترقيم الصفحات، والتصفية).
 */
فئة التصدير Texe1DataSource تمتد DataSource<Texe1Item> {
  البيانات: Texe1Item[] = EXAMPLE_DATA;
  مرقّم الصفحات: MatPaginator |.
  الترتيب: ماتسورت |.

  منشئ () {
    ممتاز()؛
  }

  /**
   * قم بتوصيل مصدر البيانات هذا بالجدول. سيتم تحديث الجدول فقط عندما
   * يُصدر الدفق المرتجع عناصر جديدة.
   * @returns دفق من العناصر التي سيتم تقديمها.
   */
  الاتصال (): يمكن ملاحظته <Texe1Item[]> {
    إذا (this.paginator && this.sort) {
      // اجمع كل ما يؤثر على البيانات المقدمة في تحديث واحد
      // دفق لاستهلاك جدول البيانات.
      إرجاع الدمج (observableOf(this.data)، this.paginator.page، this.sort.sortChange)
        .pipe(map(() => {
          return this.getPagedData(this.getSortedData([...this.data ]));
        }));
    } آخر {
      throw Error('يرجى ضبط مرقّم الصفحات والفرز على مصدر البيانات قبل الاتصال.');
    }
  }

  /**
   * يتم الاتصال به عند تدمير الجدول، استخدم هذه الوظيفة للتنظيف
   * أي اتصالات مفتوحة أو تحرير أي موارد محتجزة تم إعدادها أثناء الاتصال.
   */
  قطع الاتصال (): باطل {}

  /**
   * ترقيم الصفحات البيانات (من جانب العميل) إذا كنت تستخدم ترقيم الصفحات من جانب الخادم،
   * سيتم استبدال ذلك بطلب البيانات المناسبة من الخادم.
   */
  getPagedData الخاص (البيانات: Texe1Item[]): Texe1Item[] {
    إذا (هذا.المصفح) {
      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
      return data.splice(startIndex, this.paginator.pageSize);
    } آخر {
      إرجاع البيانات؛
    }
  }

  /**
   * فرز البيانات (من جانب العميل) إذا كنت تستخدم الفرز من جانب الخادم،
   * سيتم استبدال ذلك بطلب البيانات المناسبة من الخادم.
   */
  getSortedData الخاص (البيانات: Texe1Item[]): Texe1Item[] {
    إذا (!this.sort || !this.sort.active || this.sort.direction === '') {
      إرجاع البيانات؛
    }

    إرجاع البيانات.فرز ((أ، ب) => {
      const isAsc = this.sort?.direction === 'asc';
      التبديل (هذا.الفرز؟.نشط) {
        حالة 'الاسم': إرجاع المقارنة(a.name, b.name, isAsc);
        الحالة "معرف": إرجاع مقارنة(+a.id, +b.id, isAsc);
        الافتراضي: العودة 0؛
      }
    });
  }
}

/** مقارنة فرز بسيطة، على سبيل المثال، أعمدة المعرف/الاسم (للفرز من جانب العميل */).
مقارنة الدالة (أ: سلسلة | رقم، ب: سلسلة | رقم، إيسك: منطقي): رقم {
  return (a < b ? -1: 1) * (isAsc ? 1 : -1);
}

ملف texe1.component.ts الخاص بالمكون

{ 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.component.html'،
  styleUrls: ['./texe1.component.css']
})
فئة التصدير Texe1Component تنفذ AfterViewInit {
  @ViewChild(MatPaginator) مرقّم الصفحات!: MatPaginator;
  @ViewChild(MatSort) فرز!: MatSort;
  @ViewChild(MatTable) table!: MatTable<Texe1Item>;
  مصدر البيانات: Texe1DataSource؛

  /** يمكن إضافة معرفات الأعمدة المعروضة في الجدول، أو إزالتها، أو إعادة ترتيبها.
  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.component.html.

<app-texe1></app-texe1>

العرض: