-1

我有一些带有 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>

有人知道我失去了什么。

4

1 回答 1

3

如果您将 html 包装在其中ng-template，则可以使用 setter，如下所示：

@ViewChild(MatPaginator) set paginator(value: MatPaginator) {
  this.dataSource.paginator = value;
}

请注意，我从装饰器中删除了static: true选项。@ViewChild

Stackblitz 示例

于 2020-07-31T12:22:10.227 回答