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>
**我不知道问题是什么，但是所有值都打印在一栏中，而且我使用的是8号角材质。我在表中得到了一个硬核的数据。这是我第一次进行有角度的项目。我对如何在表中进行数据绑定没有正确的认识。
**
答案 0 :(得分：2)
当我使用带有排序，分页和过滤功能的Angular Data表时，我遇到的问题是，当它们在ngOnInit()周期内时，排序和分页器均不起作用，这是因为在{ {1}}已执行它们尚不可用。
为了使排序和分页生效，我建议将它们传递到ngOnInit()周期。
这意味着将ngOnInit（）中的代码块移至：
ngAfterViewInit()那会给你更好的结果。
答案 1 :(得分：0)
<!-- 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标签
答案 2 :(得分：0)
排序，分页 宽度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>