Question

我最近将我的项目（包括角形材料）升级到了版本8。但是，我不确定有一些问题如何解决。

component.ts

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

component.html

   <mat-table #table [dataSource]="dataSource" matSort>

            <!-- Class Column -->
            <ng-container matColumnDef="class">
                <mat-header-cell *matHeaderCellDef mat-sort-header> Class </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.class}} </mat-cell>
            </ng-container>

            <!-- Topic Column -->
            <ng-container matColumnDef="topic">
                <mat-header-cell *matHeaderCellDef mat-sort-header> Topic </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.topic}} </mat-cell>
            </ng-container>

            <!-- Tme Column -->
            <ng-container matColumnDef="datetime">
                <mat-header-cell *matHeaderCellDef mat-sort-header> Date & Time </mat-header-cell>
                <mat-cell *matCellDef="let element"> {{element.time | date:'medium'}} </mat-cell>
            </ng-container>

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


        <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true">
        </mat-paginator>

上面的ViewChild现在需要2个参数。 https://angular.io/guide/static-query-migration

我不确定如何更新这些内容，因为它们是从角度材料版本7文档中获取的。

新版本的文档没有这些ViewChilds。 https://material.angular.io/components/paginator/examples

我没有看到有角度的材料8迁移指南。

Answer 1

首先，让我们记住，在将Angular及其库从直接npm操作改为使用ng update原理图时，我们需要更改范例。

如果更新未正确完成，并且您没有版本控制来撤消更改并重试，则可以执行：

ng update @angular/core --migrate-only --from 7 --to 8

这将重新执行项目中的更新原理图。我必须进行此更新@angular/materia l，因为我有太多文件无法更改，因此脚本内存不足：P

快乐的ng编码！

Answer 2

修复

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

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

Answer 3

如Luiz所建议的，添加{static: true}作为额外的参数可以解决此问题。像这样进行设置将确保找到依赖于绑定分辨率的查询匹配项（例如结构指令*ngIf, etc...）。

{ static: false }仅可在ngAfterViewInit中访问。当模板上有结构指令（*ngIf等）时，这也是您要追求的目标。

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

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

如何将角形材质MatPaginator升级到版本8

3 个答案: