Значение этой внедренной переменной-члена не сразу доступно во время создания компонента!
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;
}
}