开发者问题收集

Angular8 对象未定义？

2021-07-21
64
javascript angular typescript

我有一段代码，我试图打开一个对话框，其中包含我的所有表单错误。我遇到的问题是对象“dialogData”出错，提示：“ERROR TypeError：dialogData 未定义”。我不确定为什么。我尝试将其声明为空数组，但效果不佳。

像这样：“let dialogData: DialogData;” 并且像这样：“let 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();
  }

}
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 类的实例创建为 const 

// 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

Anthony Serrano Bianco
2021-07-22

我认为问题在于您将 DialogData 声明为接口而不是类。 并且您声明了一个 DialogData 类型的变量，并且您尝试在不实例化 dialogData 的情况下访问 dialogData.errors ，因此它会抱怨 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();
j4rey
2021-07-22