使用mat-paginator時，我收到“this.container is undefined”錯誤

Question

我有一個mat-table，其中包含一個使用spring REST API從數據庫調用的用戶列表，它完美地工作但是當我想添加一個paginator來幫助瀏覽整個用戶列表時，我開始得到一個“this.container is嘗試單擊分頁器時出現“undefined”錯誤。

此外，由於某種原因它顯示“每頁項目數：5”，即使我有近27個用戶。

這是我的HTML代碼：

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" style="width: 500px !important">
</mat-form-field>
        <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
            <ng-container matColumnDef="id" class=".mat-column-id">
                <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
                <mat-cell *matCellDef="let user">{{user.id}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="username" class=".mat-column-username">
                <mat-header-cell *matHeaderCellDef>Username</mat-header-cell>
                <mat-cell class="description-cell" *matCellDef="let user">{{user.username}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="email" class=".mat-column-email">
                <mat-header-cell *matHeaderCellDef>Email</mat-header-cell>
                <mat-cell class="duration-cell" *matCellDef="let user">{{user.email}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="firstname" class=".mat-column-name">
                <mat-header-cell *matHeaderCellDef>firstname</mat-header-cell>
                <mat-cell class="duration-cell" *matCellDef="let user">{{user.firstName}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="lastname"class=".mat-column-name">
                <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
                <mat-cell class="duration-cell" *matCellDef="let user">{{user.lastName}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="enabled" class=".mat-column-enabled">
                <mat-header-cell *matHeaderCellDef>Enabled</mat-header-cell>
                <mat-cell class="duration-cell" *matCellDef="let user">{{user.enabled}}</mat-cell>
            </ng-container>
            <ng-container matColumnDef="registeredDate" class=".mat-column-date">
                <mat-header-cell *matHeaderCellDef>Registered Date</mat-header-cell>
                <mat-cell class="duration-cell" *matCellDef="let user">{{user.registeredDate | date: shortDate}}</mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
            <mat-row class="mat-row" *matRowDef="let row; columns: displayedColumns" (click)="onRowClicked(row)"></mat-row>
        </mat-table>
        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

和ts文件：

import { Component, OnInit, ViewChild } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { UserService } from '../user.service';
import { MatDialog, MatDialogConfig, MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { NewDialogComponent } from '../new-dialog/new-dialog.component';
import { DomSanitizer } from '@angular/platform-browser';
import { map } from 'rxjs-compat/operator/map';
import { Observable, Observer } from 'rxjs';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['../app.component.scss', './dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
  loginuser: any = {};
  imgSrc: any = {};
  users: any[] = [];
  imageToShow: any;
  public dataSource = new MatTableDataSource<User>();
  displayedColumns = ['id', 'username', 'email', 'firstname', 'lastname', 'registeredDate', 'enabled'];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  constructor(private service: UserService, private http: HttpClient, private sanitizer: DomSanitizer) {
   this.loginuser = JSON.parse(localStorage.getItem('currentUser'));
   this.service.getAllUsers(this.loginuser.token).subscribe(u => {
   this.dataSource.data = u as User[];
   this.users = u;
  // console.log('user: ', this.users);
   });
   this.dataSource.paginator = this.paginator;
   this.dataSource.sort = this.sort;
 }

 ngOnInit() {
 }

 applyFilter(filterValue: string) {
   this.dataSource.filter = filterValue.trim().toLowerCase();
   if (this.dataSource.paginator) {
   this.dataSource.paginator.firstPage();
   }
 }
}

Answer 1

在組件構造時，此注入的成員變量的值不會立即可用！

Angular將在視圖初始化完成后自動填充此屬性，但僅在組件生命周期的后期填寫。

如果我們想編寫使用@ViewChild注入的引用的組件初始化代碼，我們需要在AfterViewInit生命周期鈎子內完成 。

@Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent implements  AfterViewInit {        
      @ViewChild(SomeComponent)
      someComponent: SomeComponent;

      ngAfterViewInit() {
        console.log('Values on ngAfterViewInit():');
        console.log("someComponent:", this.someComponent);
      }  


    }

在你的情況下，只需將這兩行放在NgAfterViewInit LifeCyle中：

    import { Component, OnInit, ViewChild } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { UserService } from '../user.service';
import { MatDialog, MatDialogConfig, MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { NewDialogComponent } from '../new-dialog/new-dialog.component';
import { DomSanitizer } from '@angular/platform-browser';
import { map } from 'rxjs-compat/operator/map';
import { Observable, Observer } from 'rxjs';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['../app.component.scss', './dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit, AfterViewInit {
  loginuser: any = {};
  imgSrc: any = {};
  users: any[] = [];
  imageToShow: any;
  public dataSource = new MatTableDataSource<User>();
  displayedColumns = ['id', 'username', 'email', 'firstname', 'lastname', 'registeredDate', 'enabled'];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  constructor(private service: UserService, private http: HttpClient, private sanitizer: DomSanitizer) {
   this.loginuser = JSON.parse(localStorage.getItem('currentUser'));
   this.service.getAllUsers(this.loginuser.token).subscribe(u => {
   this.dataSource.data = u as User[];
   this.users = u;
  // console.log('user: ', this.users);
   });
 ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
   this.dataSource.sort = this.sort;
  }  

 }