Question

我正在尝试使用this example来实现MaterialDialog，由于某种原因，我得到了：

Cannot read property 'data' of null at new ACDialogComponent

我的组件

import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material";
import { Component, OnInit, Inject } from "@angular/core";
import { FormGroup, FormBuilder } from "@angular/forms";

@Component({
    selector: 'acdialog',
    templateUrl: './acdialog.component.html',
    styleUrls: ['./acdialog.component.css']
})
export class ACDialogComponent implements OnInit {

    form: FormGroup;
    data: string="";
    datatype:string;

    constructor(
        private fb: FormBuilder,
        private dialogRef: MatDialogRef<ACDialogComponent>,
        @Inject(MAT_DIALOG_DATA) d) {

        this.data = d.data;
        this.datatype = data.datatype;

    }

    ngOnInit() {

        this.form = this.fb.group({
            description: ["descriptionhere", []],
        });

    }

    save() {
        this.dialogRef.close(this.form.value);
    }

    close() {
        this.dialogRef.close();
    }
}

我的HTML

<h2 mat-dialog-title>Add new contact</h2>

<mat-dialog-content [formGroup]="form">

    <mat-form-field>
        <input matInput placeholder="Data:" formControlName="data">
    </mat-form-field>
    <h4>data type</h4>

    <mat-form-field>
        <select matNativeControl required formControlName="datatype">
            <option value="email">email</option>
            <option value="phone">phone</option>
        </select>
    </mat-form-field>

</mat-dialog-content>

<mat-dialog-actions>
    <button class="mat-raised-button" (click)="close()">Close</button>
    <button class="mat-raised-button mat-primary" (click)="save()">Save</button>
</mat-dialog-actions>

外部组件（打开对话框的组件）

constructor(private dialog: MatDialog) { }

openDialog() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    this.dialog.open(ACDialogComponent, dialogConfig);

    const dialogRef = this.dialog.open(ACDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(
        data => console.log("Dialog output:", data)
    );
}

Answer 1

您没有设置data的{{1}}属性，因此dialogConfig在对话框组件的构造函数中未定义。

似乎它应该是一个具有d和data属性的对象，如下所示：

datatype

Answer 2

您似乎没有为表单创建控件，您将需要执行以下操作来创建控件data和datatype

   import { FormGroup, FormBuilder, FormControl } from "@angular/forms"; 

   ngOnInit() {

        this.form = this.fb.group({
            description: ["descriptionhere", []],
            data: new FormControl(this.data),
            datatype: new FormControl(this.datatype)
        });

    }

stackblitz示例减去mat-dialog，如果将其应用到您的项目中不能解决问题，则实际上也可能是通过数据变量将输入数据DI输入对话框中的问题。

https://stackblitz.com/edit/angular-nuy1jy?embed=1&file=app/select-overview-example.ts

修订，您似乎也没有将数据传递到对话框中，请尝试以下操作。

 const dialogRef = this.dialog.open(ACDialogComponent, {
   disableClose: true,
   autoFocus: true,
   data: passYourDataHere 
});

Answer 3

错误Cannot read property 'data' of null at new ACDialogComponent。是因为constructor正文中的拼写错误。变量data从未

看看 @Inject(MAT_DIALOG_DATA) d

this.datatype = data.datatype;

更改

constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<ACDialogComponent>,
    @Inject(MAT_DIALOG_DATA) d) {

    this.data = d.data;
    this.datatype = data.datatype;

}

到

constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<ACDialogComponent>,
    @Inject(MAT_DIALOG_DATA) d) {

    this.data = d.data;
    this.datatype = d.datatype;

}

角材料窗体字段控件为null

3 个答案: