![](/img/trans.png)
[英]Why does the Angular Material table mat-paginator pagesize not work?
[英]mat-paginator does not work in the ng-template
我有一些帶有 mat-paginator 的 mat-table,如下所示:
<table mat-table style="width: 100%;" [dataSource]="dataSource">
<ng-container matColumnDef="evento">
<th mat-header-cell *matHeaderCellDef> Evento </th>
<td mat-cell *matCellDef="let row"> {{row.evento}} </td>
</ng-container>
<ng-container matColumnDef="fecha">
<th mat-header-cell *matHeaderCellDef> Fecha </th>
<td mat-cell *matCellDef="let row">{{row.fecha}} </td>
</ng-container>
..... more columns .....
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef style="text-align: right; margin-right: 8px;"> Edit </th>
<td mat-cell *matCellDef="let row" style="text-align: right;">
<button mat-icon-button (click)="editEvent(row)">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displColumns"></tr>
</table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
在后面的代碼中
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
並在 ngOnInit
this.dataSource.paginator = this.paginator;
在將表格放入 de ng-template 之前,每項工作都很好,我想使用 ng-template 指令在事件列表之間進行更改並添加新事件
<div *ngIf="EventSelect then listEv else addNew">
</div>
有人知道我失去了什么。
如果您將 html 包裝在ng-template
中,您可以按如下方式使用 setter:
@ViewChild(MatPaginator) set paginator(value: MatPaginator) {
this.dataSource.paginator = value;
}
請注意,我從@ViewChild
裝飾器中刪除static: true
選項。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.