Angular8 对象未定义？

Question

我有这个代码，我试图打开一个包含所有表单错误的对话框。 我遇到的问题是对象“dialogData”错误说：“错误类型错误：dialogData 未定义”。 我不知道为什么。 我试图将它声明为一个空数组，但效果不佳。

像这样：“让 dialogData：DialogData;” 并且像这样：“让 dialogData：DialogData = <DialogData>{};”

  // get all error messages
  getFormValidationErrors() {
    Object.keys(this.quoteForm.controls).forEach(key => {
      const controlErrors: ValidationErrors = this.quoteForm.get(key).errors;
      let dialogData: DialogData;

      if (controlErrors != null) {
        Object.keys(controlErrors).forEach(keyError => {
          console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
          let errorData: ErrorData = { 
            key: key,
            keyError: keyError,
            controlErrors: controlErrors[keyError]
          }
          dialogData.errors.push(errorData);
        });
        this.openDialog(dialogData);
      }
    });
  }

import {Component, Inject} from '@angular/core';
import { ValidationErrors } from '@angular/forms';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

export interface DialogData {
  errors: ErrorData[];
}

export interface ErrorData {
    key: string;
    keyError: string;
    controlErrors: ValidationErrors;
  }

@Component({
  selector: 'dialog-validation-errors',
  templateUrl: 'dialog-validation-errors.html',
})
export class DialogValidationErrors {

  constructor(
    public dialogRef: MatDialogRef<DialogValidationErrors>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

Answer 1

我相信问题在于您已将DialogData声明为接口而不是类。 并且您声明了一个DialogData类型的变量，并且您试图访问dialogData.errors而不dialogData ，因此它抱怨dialogData 未定义。

// get all error messages
getFormValidationErrors() {
    Object.keys(this.quoteForm.controls).forEach(key => {
        const controlErrors: ValidationErrors =     this.quoteForm.get(key).errors;
        let dialogData: DialogData; //<-- DialogData is not initialized

        if (controlErrors != null) {
            Object.keys(controlErrors).forEach(keyError => {
            console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
                let errorData: ErrorData = { 
                    key: key,
                    keyError: keyError,
                    controlErrors: controlErrors[keyError]
                }
                dialogData.errors.push(errorData); //<-- trying to access dialogData.errors
            });
            this.openDialog(dialogData);
        }
    });
}

一个简单的解决方法是将该行替换为

let dialogData: DialogData = {errors: []}; 

或将DialogData更改为类并实例化对象

let dialogData: DialogData = new DialogData(); 

Answer 2

我实际上会改变一些小事情。

最初，您的 DialogData 接口可以是一个具体的类，因此您可以轻松地实例化它。 此外，您永远不会创建 ErrorData 数组的实例，因此在尝试推送某些内容时很可能会失败。

所以这些就是我要做的改变。

在您的 dialog-validation-errors 组件中：将您的 DialogData 界面更改为以下

export class DialogData {
  errors = new Array<ErrorData>(); // Here you make sure there's always an instance of the array.
}

在您的 getFormValidationErrors 方法中：将 DialogData 类的实例创建为常量

// get all error messages
getFormValidationErrors() {
    Object.keys(this.quoteForm.controls).forEach(key => {
        const controlErrors: ValidationErrors = this.quoteForm.get(key).errors;
        
        // Change 1 - This creates your errors array instance as well
        // as we have the inline initialization in your DialogData class
        const dialogData = new DialogData();

        if (controlErrors != null) {
            Object.keys(controlErrors).forEach(keyError => {
                console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
                let errorData: ErrorData = { 
                    key: key,
                    keyError: keyError,
                    controlErrors: controlErrors[keyError]
                }

              dialogData.errors.push(errorData);
            });
         }
    });

    // Change 2 - You probably don't want to open the dialog n times in your foreach loop.
    // Maybe it's better to do it after all the dialog data is calculated?
    this.openDialog(dialogData);
}

我在这里做了一个快速测试： https : //stackblitz.com/edit/angular-playground-cqdwnj?file=app%2Fapp.component.ts