mat-paginator 在 ng-template 中不起作用

Question

我有一些带有 mat-paginator 的 mat-table，如下所示：

\n

                 <table mat-table style="width: 100%;" [dataSource]="dataSource">\n                    <ng-container matColumnDef="evento">\n                        <th mat-header-cell *matHeaderCellDef> Evento </th>\n                        <td mat-cell *matCellDef="let row"> {{row.evento}} </td>\n                    </ng-container>\n                    <ng-container matColumnDef="fecha">\n                        <th mat-header-cell *matHeaderCellDef> Fecha </th>\n                        <td mat-cell *matCellDef="let row">{{row.fecha}} </td>\n                    </ng-container>\n                    ..... more columns .....\n                    <ng-container matColumnDef="edit">\n                        <th mat-header-cell *matHeaderCellDef style="text-align: right; margin-right: 8px;"> Edit </th>\n                        <td mat-cell *matCellDef="let row" style="text-align: right;">\n                            <button mat-icon-button (click)="editEvent(row)">\n                                <mat-icon>edit</mat-icon>\n                            </button>\n                        </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef="displColumns"></tr>\n                    <tr mat-row *matRowDef="let row; columns: displColumns"></tr>\n                </table>\n                <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>\n

\n

并在后面的代码中

\n

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;\n

\n

并在 ngOnInit 中

\n

this.dataSource.paginator = this.paginator;\n

\n

在将表格放入 ng-template 之前，一切正常，\ni 希望使用 ng-template 指令在事件列表之间进行更改并添加新事件

\n

<div *ngIf="EventSelect then listEv else addNew">\n</div>\n

\n

有人知道我\xc2\xb4m 失去了什么。

\n

Answer 1

如果你将 html 包裹起来，ng-template你可以使用 setter，如下所示：

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

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

堆栈闪电战示例