Question

我有一个mat-table，该表具有使用spring REST API从数据库中调用的用户列表，该列表运行得很好，但是当我想添加一个分页器来帮助遍历整个用户列表时，我开始得到一个“ .container未定义”错误，尝试单击分页器。

而且，由于某种原因，即使我有27位用户，它也只能显示“每页项数：5”。

这是我的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;
  }  

 }

使用mat-paginator时出现“ this.container未定义”错误

1 个答案: