Angular 5.0 StaticInjectorError

时间:2018-02-06 04:33:48

标签: javascript angular angular-material-5

我试图打开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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您要在UsertableComponent中注入MatDialog。检查是否已在要创建其实例的父模块的提供者列表(例如,前App.module.ts)或父组件(例如AppComponent.ts)中正确注册了它。