具有排序、分页和过滤功能的 Angular 数据表

Question

ts 文件

 import { Component, OnInit, ViewChild } from '@angular/core';
    import { MatPaginator } from '@angular/material/paginator';
    import { MatSort } from '@angular/material/sort';
    import { MatTableDataSource } from '@angular/material/table';
    import { PersonalDB } from '../personal-db';
    import { Personal } from '../personal';


    @Component({
      selector: 'app-student-table',
      templateUrl: './student-table.component.html',
      styleUrls: ['./student-table.component.css']
    })
    export class StudentTableComponent implements OnInit {

      @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
      @ViewChild(MatSort, { static: true }) sort: MatSort;



      constructor() {

      }

      personal: Personal[] = [
        {
          dates: "2018.2.3",
          image: "../../assets/img/a.jpg",
          id: "1",
          name: "Nadun",
          email: "qw.q@.gmail.com",
          mobile: "0778012319",
        }, {
          dates: "2018.2.13",
          image: "../../assets/img/b.jpg",
          id: "2",
          name: "kmale",
          email: "qw.q@.gmail.com",
          mobile: "0778012319",
        }, {
          dates: "2018.2.23",
          image: "../../assets/img/c.jpg",
          id: "3",
          name: "sunil",
          email: "qw.q@.gmail.com",
          mobile: "0778012319",
        },
        {
          dates: "2018.2.1",
          image: "../../assets/img/d.jpg",
          id: "4",
          name: "Nipun",
          email: "qw.q@.gmail.com",
          mobile: "0778012319",
        },
        {
          dates: "2018.2.6",
          image: "../../assets/img/e.jpg",
          id: "5",
          name: "Kavinga",
          email: "qw.q@.gmail.com",
          mobile: "0778012319",
        },
        {
          dates: "2018.2.14",
          image: "../../assets/img/f.jpg",
          id: "6",
          name: "Ishara",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.25",
          image: "../../assets/img/g.jpg",
          id: "7",
          name: "Dilshan",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.19",
          image: "../../assets/img/h.jpg",
          id: "8",
          name: "Ruvini",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.7",
          image: "../../assets/img/i.jpg",
          id: "9",
          name: "Saduni",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.10",
          image: "../../assets/img/j.jpg",
          id: "10",
          name: "Himaya",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.19",
          image: "../../assets/img/k.jpg",
          id: "11",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.18",
          image: "../../assets/img/l.jpg",
          id: "12",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.19",
          image: "../../assets/img/m.jpg",
          id: "13",
          name: "string",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.28",
          image: "../../assets/img/n.jpg",
          id: "14",
          name: "string",
          email: "string",
          mobile: "string",
        }, {
          dates: "2018.2.17",
          image: "../../assets/img/o.jpg",
          id: "15",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.21",
          image: "../../assets/img/p.jpg",
          id: "16",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.11",
          image: "../../assets/img/a.jpg",
          id: "17",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.22",
          image: "../../assets/img/q.jpg",
          id: "18",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.19",
          image: "../../assets/img/r.jpg",
          id: "19",
          name: "string",
          email: "string",
          mobile: "string",
        },
        {
          dates: "2018.2.13",
          image: "../../assets/img/s.jpg",
          id: "20",
          name: "string",
          email: "string",
          mobile: "string",
        }

      ];
      displayedColumns = ['dates', 'image', 'id', 'name', 'email', 'mobile'];
      dataSource = new MatTableDataSource(this.personal);

      ngOnInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource.data = this.personal;
        console.log(this.personal);
        console.log(this.dataSource);
      }

      applyFilter(filterValue: string) {
        filterValue = filterValue.trim();
        filterValue = filterValue.toLowerCase();
        this.dataSource.filter = filterValue;
      }

      rowClicked(row: any): void {
        console.log(row);
      }

    }

html 页面

<mat-form-field>
  <br>
  <small>Search:</small>
  <input matInput (keyup)="applyFilter($event.target.value)">
  <mat-divider style="color: darkgrey"></mat-divider>
</mat-form-field>
<br>
<br>
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

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

    <!-- 2 -->
    <ng-container matColumnDef="image">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> image </th>
        <td mat-cell *matCellDef="let row"> <img src="{{row.image}}" style="width: 50px; height: 50;"></td>
      </ng-container>

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

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

    <!-- ID 5 -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> email </th>
      <td mat-cell *matCellDef="let row"> {{row.email}} </td>
    </ng-container>

    <!-- 6 -->
    <ng-container matColumnDef="mobile">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> mobile </th>
      <td mat-cell *matCellDef="let row"> <img src="" style="width: 50px; height: 50;">{{row.mobile}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr>
      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="rowClicked(row)"></mat-row>
    </tr>

  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

** 我不知道问题出在哪里，但所有值都打印在一列中，而且我使用的是 Angular 8 材料。我在表格中得到了一个硬核数组数据。这是我第一次做一个角度项目。我对如何在表中绑定数据没有正确的想法。
**

enter link description here

Answer 1

排序、分页 宽度 API：

sortData(sort: Sort) {
    if(sort.direction == "asc" || sort.direction == "desc") {
      this.order = [{order: sort.active, type: sort.direction}]
    } else {
      this.order = null;
    }
    ......
  }
  
  pageChangeEvent(event) {
    this.pageIndex = event.pageIndex + 1;
    this.pageSize = event.pageSize;
    ....
  }

<table class="table" mat-table matSort [dataSource]="dataSource" (matSortChange)="sortData($event)">
        

        <!-- Item Price Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> Name </th>
          <td mat-cell *matCellDef="let element">
            <a routerLink="/campaign/edit/{{pageTab}}/{{element.id}}" class="info_title">
              {{(element.name.length>40) ? (element.name | slice:0:40) + '...' : (element.name)}} 
              <span class="btn-draft" *ngIf="element.status == 'C'">Draft</span>
            </a>
            <a routerLink="/campaign/edit/{{pageTab}}/{{element.id}}" class="info_value">        {{element.categoryName}}</a>
          </td>
        </ng-container>  

        <!-- Item Code Column -->
        <ng-container matColumnDef="remainingQuantity">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="remainingQuantity"> Remaining quantity </th>
          <td mat-cell *matCellDef="let element"> {{element.remainingQuantity}} </td>
        </ng-container>
          
        <!-- Item Merchant Column -->
        <ng-container matColumnDef="redemption_end_date">
          <th mat-header-cell *matHeaderCellDef mat-sort-header="redemption_end_date"> End time </th>
          <td mat-cell *matCellDef="let element"> {{element.redemptionEndDate}} </td>
        </ng-container>

        <!-- Item Edit Delete Column -->
        <ng-container matColumnDef="lastModifiedDate">
          <th mat-header-cell *matHeaderCellDef></th>
          <td class="last-edited" mat-cell *matCellDef="let element">last edited on {{element.lastModifiedDate}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
      <mat-paginator style="display: none;"></mat-paginator>
      <mat-paginator *ngIf="(listCoupon && listCoupon.length>0) || filterValue" style="margin-left: auto; border-top: 1px solid #E7E7E7;" 
        #paginator [length]="totalItems"
        [pageSize]="pageSize"
        [pageIndex]="(pageIndex - 1)"
        [pageSizeOptions]="[5, 10, 25, 50, 100]" showFirstLastButtons (page)="pageChangeEvent($event)">
      </mat-paginator>

Answer 2

<!-- normal data -->
<br>
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<br>
<br>
<div class="example-container mat-elevation-z8">

  <mat-table *ngIf="dataSource != null" [dataSource]="dataSource" matSort>

    <!-- 1 -->
    <ng-container matColumnDef="joinDate">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Join Date </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.joinDate}}</mat-cell>
    </ng-container>

    <!-- 2 -->
    <ng-container matColumnDef="image">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Image </mat-header-cell>
      <mat-cell *matCellDef="let row"><img src="{{row.image}}" style="width: 25px; height: 25;"></mat-cell>
    </ng-container>

    <!-- 3 -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>

    <!-- 4 -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
    </ng-container>

    <!-- ID 5 -->
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
      <mat-cell  *matCellDef="let row">{{row.email}}</mat-cell>
    </ng-container>

    <!-- 6 -->
    <ng-container matColumnDef="mobile">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile </mat-header-cell>
      <mat-cell *matCellDef="let row">{{row.mobile}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>


  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

更正 - 删除所有表格、tr 和 td 标签

Answer 3

当我使用带有排序、分页和过滤功能的 Angular 数据表时，我遇到的问题是排序和分页器在 ngOnInit() 周期内都不起作用，这是因为当时 ngOnInit()被执行 他们还不可用。 为了使排序和分页起作用，我建议将它们传递给ngAfterViewInit() 循环。

这意味着将您在 ngOnInit() 中的代码块移动到：

ngAfterViewInit(){
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.dataSource.data = this.personal;
    console.log(this.personal);
    console.log(this.dataSource);
}

这会给你一个更好的结果。