angular - 使用 Mat-Paginator 时无法读取未定义的属性“管道”

Question

我正在使用 ngx-admin 模板，但我想添加 Mat-Table 和 Mat-Paginator，因此我正在导入 @angular/material 模块。下面是我的代码：

事务模块.ts

....
import { 
  MatTooltipModule,
  MatRippleModule,
  MatButtonModule, 
  MatSelectModule,
  MatFormFieldModule, 
  MatInputModule, 
  MatIconModule, 
  MatTableModule, 
  MatSortModule, 
  MatPaginatorModule, 
} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    NbCardModule,
    NbIconModule,
    NbInputModule,
    ThemeModule,
    TransactionRoutingModule,
    NbInputModule,
    NbCardModule,
    NbButtonModule,
    NbActionsModule,
    NbUserModule,
    NbCheckboxModule,
    NbRadioModule,
    NbDatepickerModule,
    NbSelectModule,
    NbIconModule,
    ngFormsModule,
    ReactiveFormsModule,
    MatTooltipModule,
    MatRippleModule,
    MatButtonModule,
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
  ],
  declarations: [
    ...routedComponents,
  ],
})

transaction.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TransactionComponent } from './transaction.component';
import { TransactionListComponent } from './list/transaction-list.component';
import { TransactionAddComponent } from './add/transaction-add.component';

const routes: Routes = [{
  path: '',
  component: TransactionComponent,
  children: [
    {
      path: 'list',
      component: TransactionListComponent,
    },
    {
      path: 'add',
      component: TransactionAddComponent,
    },
  ],
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TransactionRoutingModule { }

export const routedComponents = [
    TransactionComponent,
    TransactionListComponent,
    TransactionAddComponent,
];

事务/列表/事务列表.component.ts

  resultList: Transaction[] = [];
  dataSource: MatTableDataSource<Transaction>;
  displayedColumns: string[] = ['date', 'category_name', 'description', 'debit', 'credit'];

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

  constructor(private transService: TransactionData) {}

  ngAfterViewInit() {
    this.transService.getTransactionData().subscribe(
      (res: Transaction[]) => {
        this.resultList = res;
        this.dataSource = new MatTableDataSource(this.resultList);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      err => {
        console.log(err);
      }
    )
  }

交易/列表/交易-list.html

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
                <!-- Date Column -->
                <ng-container matColumnDef="date">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
                  <td mat-cell *matCellDef="let element"> {{ element.date | date: 'dd MMM yyyy' }} </td>
                </ng-container>

                <!-- Category Column -->
                <ng-container matColumnDef="category_name">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Category </th>
                  <td mat-cell *matCellDef="let element"> {{ element.category_name }} </td>
                </ng-container>

                <!-- Description Column -->
                <ng-container matColumnDef="description">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
                  <td mat-cell *matCellDef="let element"> {{ element.description }} </td>
                </ng-container>

                <!-- Debit Column -->
                <ng-container matColumnDef="debit">
                  <th mat-header-cell *matHeaderCellDef class="text-right"> Debit </th>
                  <td mat-cell *matCellDef="let element" class="text-right"> {{ (element.type =='Out') ? (element.amount | number: '1.2-2') : ''}} </td>
                </ng-container>

                <!-- Credit Column -->
                <ng-container matColumnDef="credit">
                  <th mat-header-cell *matHeaderCellDef class="text-right"> Credit </th>
                  <td mat-cell *matCellDef="let element" class="text-right">  {{ (element.type =='In') ? (element.amount | number: '1.2-2') : ''}} </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
              </table>
              <div class="pagination-div">
                <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 50]"></mat-paginator>
              </div>

该表工作正常，但是分页器页面选择器无法选择。它给我带来了如下错误：

ERROR TypeError: Cannot read property 'pipe' of undefined
    at MatSelect.ngAfterContentInit (select.js:678)
    at callHook (core.js:3937)
    at callHooks (core.js:3901)
    at executeInitAndCheckHooks (core.js:3842)
    at refreshView (core.js:11819)
    at refreshDynamicEmbeddedViews (core.js:13142)
    at refreshView (core.js:11800)
    at refreshDynamicEmbeddedViews (core.js:13142)
    at refreshView (core.js:11800)
    at refreshComponent (core.js:13217)

Answer 1

Add {static: false}

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