Lassen Sie uns darüber sprechen, wie Sie mit Winkelmaterial statistische Tabellen erstellen

Verwenden Sie Angular Material, um statistische Tabellen zu erstellen.

Installieren Sie Angular Material, das Komponentenentwicklungstool (CDK) und die Angular-Animationsbibliothek, und führen Sie den Code

schematisch

aus

seitenbare Datenquellen. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Generieren Sie @angular/material:table texe1

und ändern Sie es dann basierend darauf.

Die HTML-Datei der Komponente

<div class="mat-elevation-z8">
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- ID-Spalte -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Seriennummer</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <!-- Namensspalte -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Gesteins- und Bodenname</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-container>

    <!-- num1 Spalte -->
    <ng-container matColumnDef="num1">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> erwartete Menge</th>
      <td mat-cell *matCellDef="let row">{{row.num1}}</td>
    </ng-container>

    <!-- num2 Spalte -->
    <ng-container matColumnDef="num2">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> aktuelle Nummer</th>
      <td mat-cell *matCellDef="let row">{{row.num2}}</td>
    </ng-container>



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

  <!-- Kontrollieren Sie die Anzeigelänge der Tabellendaten-->
  <mat-paginator #paginator
      [length]="dataSource?.data?.length"
      [pageIndex]="0"
      [pageSize]="10"
      [pageSizeOptions]="[5, 10, 17]"
      aria-label="Seite auswählen">
  </mat-paginator>
</div>

Die texe1-datasource.ts-Datei der Komponente

import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } aus '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import {map} aus 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';

// TODO: Ersetzen Sie dies durch Ihren eigenen Datenmodelltyp
Exportschnittstelle Texe1Item {
  Name: Zeichenfolge;
  ID: Nummer;
  num1: Zahl;
  num2: Nummer;
}

// TODO: Ersetzen Sie dies durch echte Daten aus Ihrer Anwendung
const EXAMPLE_DATA: Texe1Item[] = [
  {id: 1, name: 'schluffiger Ton', num1:1000, num2:100,},
  {id: 2, name: 'schluffiger schluffiger Ton', num1:1000, num2:100,},
  {id: 3, name: 'Clay', num1:1000, num2:100,},
  {id: 4, name: 'Tonschlamm', num1:1000, num2:100,},
  {id: 5, name: 'schluffiger Ton', num1:1000, num2:100,},
  {id: 6, name: 'Brekzie (Brekzie)', num1:1000, num2:100,},
  {id: 7, name: '中沙', num1:1000, num2:1000,},
  {id: 8, name: 'Organischer Boden', num1:1000, num2:100,},
  {id: 9, name: 'Torfboden A', num1:1000, num2:100,},
  {id: 10, name: 'Torfboden B', num1:1000, num2:100,},
  {id: 11, name: 'Sandschlamm', num1:1000, num2:100,},
  {id: 12, name: 'schluffsand', num1:1000, num2:100,},
  {id: 13, name: 'feiner Sand', num1:1000, num2:100,},
  {id: 14, name: 'grober Sand', num1:1000, num2:100,},
  {id: 15, name: 'Kies', num1:1000, num2:100,},
  {id: 16, name: 'Pebble (Kies)', num1:1000, num2:100,},
  {id: 17, name: 'Boulder (Boulder)', num1:1000, num2:100,},

];

/**
 * Datenquelle für die Texe1-Ansicht. Diese Klasse sollte
 * Kapseln Sie die gesamte Logik zum Abrufen und Bearbeiten der angezeigten Daten
 * (einschließlich Sortierung, Paginierung und Filterung).
 */
Die Exportklasse Texe1DataSource erweitert DataSource<Texe1Item> {
  Daten: Texe1Item[] = EXAMPLE_DATA;
  Paginator: MatPaginator |.
  Sortieren: MatSort |. undefiniert;

  Konstruktor() {
    super();
  }

  /**
   * Verbinden Sie diese Datenquelle mit der Tabelle. Die Tabelle wird nur aktualisiert, wenn
   * Der zurückgegebene Stream gibt neue Elemente aus.
   * @returns Ein Stream der Elemente, die gerendert werden sollen.
   */
  connect(): Observable<Texe1Item[]> {
    if (this.paginator && this.sort) {
      // Alles, was sich auf die gerenderten Daten auswirkt, in einem Update zusammenfassen
      // Stream für die zu konsumierende Datentabelle.
      return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
        .pipe(map(() => {
          return this.getPagedData(this.getSortedData([...this.data ]));
        }));
    } anders {
      throw Error('Bitte stellen Sie den Paginator ein und sortieren Sie nach der Datenquelle, bevor Sie eine Verbindung herstellen.');
    }
  }

  /**
   * Wird aufgerufen, wenn die Tabelle zerstört wird. Verwenden Sie diese Funktion zum Bereinigen
   * alle offenen Verbindungen oder geben alle gehaltenen Ressourcen frei, die während der Verbindung eingerichtet wurden.
   */
  trennen(): void {}

  /**
   * Paginieren Sie die Daten (clientseitig).
   * Dies würde durch die Anforderung der entsprechenden Daten vom Server ersetzt.
   */
  private getPagedData(data: Texe1Item[]): Texe1Item[] {
    if (this.paginator) {
      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
      return data.splice(startIndex, this.paginator.pageSize);
    } anders {
      Rückgabedaten;
    }
  }

  /**
   * Sortieren Sie die Daten (clientseitig).
   * Dies würde durch die Anforderung der entsprechenden Daten vom Server ersetzt.
   */
  private getSortedData(data: Texe1Item[]): Texe1Item[] {
    if (!this.sort || !this.sort.active || this.sort.direction === '') {
      Rückgabedaten;
    }

    return data.sort((a, b) => {
      const isAsc = this.sort?.direction === 'asc';
      switch (this.sort?.active) {
        case 'name': return vergleichen(a.name, b.name, isAsc);
        case 'id': return vergleichen(+a.id, +b.id, isAsc);
        Standard: Rückgabe 0;
      }
    });
  }
}

/** Einfacher Sortierkomparator für Beispiel-ID-/Namensspalten (zur clientseitigen Sortierung) */
Funktion vergleichen(a: Zeichenfolge | Zahl, b: Zeichenfolge | Zahl, isAsc: boolean): Zahl {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

Die Datei texe1.component.ts der Komponente

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

@Komponente({
  Selektor: 'app-texe1',
  templateUrl: './texe1.component.html',
  styleUrls: ['./texe1.component.css']
})
Die Exportklasse Texe1Component implementiert AfterViewInit {
  @ViewChild(MatPaginator) Paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatTable) Tabelle!: MatTable<Texe1Item>;
  Datenquelle: Texe1DataSource;

  /** In der Tabelle angezeigte Spalten-IDs können hinzugefügt, entfernt oder neu angeordnet werden.
  displayedColumns = ['id', 'name','num1','num2'];

  Konstruktor() {
    this.dataSource = new Texe1DataSource();
  }

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

Abschließend wird es in der Datei app.component.html angezeigt.

<app-texe1></app-texe1>

Rendering: