我试图打开Dialog。当我按下按钮但我有这个错误:
ERROR Error: StaticInjectorError(AppModule)[UsertableComponent -> MatDialog]:
StaticInjectorError(Platform: core)[UsertableComponent -> MatDialog]:
NullInjectorError: No provider for MatDialog!
at _NullInjector.get (core.js:994)
at resolveToken (core.js:1292)
at tryResolveToken (core.js:1234)
at StaticInjector.get (core.js:1102)
at resolveToken (core.js:1292)
at tryResolveToken (core.js:1234)
at StaticInjector.get (core.js:1102)
at resolveNgModuleDep (core.js:10837)
at NgModuleRef_.get (core.js:12070)
at resolveDep (core.js:12560)
文件userbtable.component.ts:
import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
import { User } from '../../models/user.model';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'usertable',
templateUrl: './usertable.component.html',
styleUrls: ['./usertable.component.scss']
})
export class UsertableComponent implements OnInit {
dataSource = new MatTableDataSource(ELEMENT_DATA);
displayedColumns = ['id', 'firstname', 'middlaname', 'lastname', 'email', 'phone', 'company', 'position', 'actions'];
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private UserService: UserService , public dialog: MatDialog) { }
applyFilter(filterValue: string) {
//debugger;
console.log(this.dataSource);
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
openDialogEditUser(profilUser: string) {
console.log('EDIT');
}
openDialogDeleteUser(profilUser: string) {
console.log('DELETE');
}
ngOnInit() {
let dataSource = new UserDataSource(this.UserService);
console.log(this.UserService.getUser());
}
//@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
}
export class UserDataSource extends DataSource<any>{
constructor(private UserService: UserService) {
super();
}
connect(): Observable<User[]> {
return this.UserService.getUser();
}
disconnect() { }
}
@Component({
selector: 'dialog-add-user',
templateUrl: './dialog-add-user.component.html',
})
export class DialogOverviewExample {
animal: string;
name: string;
constructor(public dialog: MatDialog) { }
openDialog() {
debugger;
let dialogRef = this.dialog.open(DialogAddUser, {
width: '250px',
data: { name: "this.name", animal: "this.animal" }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}
export class DialogAddUser {
constructor(
public dialogRef: MatDialogRef<DialogAddUser>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}
&#13;
答案 0 :(得分:0)
您要在UsertableComponent中注入MatDialog。检查是否已在要创建其实例的父模块的提供者列表(例如,前App.module.ts)或父组件(例如AppComponent.ts)中正确注册了它。