Question

我正在尝试从基础数据模型创建表单。数据位于对象（Member）中，其中某些属性也是对象（即子对象）。我正在尝试在子视图中渲染子对象。我可以在父级上渲染Member属性，但是当我进入子对象/子视图时，出现控制台错误（ERROR TypeError: "can't convert undefined to object"），而子视图根本不渲染。 / p>

我很确定错误发生在objKeys = Object.keys(this.objEnroll);上，并且在初始化成员对象时，我尝试确保所有属性都已初始化，以便未定义任何内容。

“成员”对象：

export class Member {

    constructor(
        private userName: string ="",
        private password: string = "",
        private uId: number = 0,
        private idData: NameId = {
            "familyName": {"Family Name: ": ''}, 
            "givenName":{"Given Name(s): ": ''}, 
            "middleName":{"Middle Name(s): ": ''}
        },
}

export interface NameId {
    "familyName": {"Family Name: ": string},
    "givenName": {"Given Name(s): ": string},
    "middleName": {"Middle Name(s): ": string}
}

主要形式：

<form [formGroup]="form">
  . . .
  <table>
    <tr *ngFor="let key of memberKeys">
      <td>{{key}}</td>
      <ng-container *ngIf="topLevel(member[key]); else subTable">
        <td><input type="text" name="{{key}}" placeholder="Enter {{key}} Here" formControlName="{{key}}"/></td>
      </ng-container>
      <ng-template #subTable>
        <app-sub-enroll-form [objEnroll]="member[key]"></app-sub-enroll-form> 
      </ng-template>
    </tr>
  </table>
  <button type="submit">Submit</button>
</form>

主要表单组件：

export class EnrollFormComponent implements OnInit {
  formControls = {};
  form: FormGroup;
  @Input() member: Member = new Member("");
  memberKeys = Object.keys(this.member);

  constructor(private templateVal: TemplateValidationService ) {  }

topLevel(s: any): boolean {
  return (this.templateVal.primType(s)) ?  true : false ;
}

ngOnInit() {
  this.memberKeys.forEach((key) => {
    let validators = [];
    this.templateVal.handleValidation(key, validators);
    this.formControls[key] = new FormControl(this.member[key], validators);
  })
  this.form = new FormGroup(this.formControls);
  }
}

子表单组件：

@Component({
  selector: 'app-sub-enroll-form',
  templateUrl: './sub-enroll-form.component.html',
  styleUrls: ['./sub-enroll-form.component.css']
})
export class SubEnrollFormComponent implements OnInit {
@Input() objEnroll : NameId | EmailData | PhoneData | AddressData;
\\ *** I BELIEVE THE NEXT LINE IS CREATING THE PROBLEM . . . 
objKeys = Object.keys(this.objEnroll);
form: FormGroup;
formControls = {};

  constructor(private templateVal: TemplateValidationService) { }

ngOnInit() {
  this.objKeys.forEach((key) => {
    let validators = [];
    this.templateVal.handleValidation(key, validators);
    this.formControls[key] = new FormControl(this.objEnroll[key], validators);
  })
  this.form = new FormGroup(this.formControls);
  }
}

Answer 1

输入变量在构造期间不可用。访问输入属性应该在OnInit Lifecycle中完成。

要解决您的问题，只需将objKeys = Object.keys(this.objEnroll);移至ngOnInit方法中即可：

ngOnInit() {
  this.objKeys = Object.keys(this.objEnroll);
  this.objKeys.forEach((key) => {
    let validators = [];
    this.templateVal.handleValidation(key, validators);
    this.formControls[key] = new FormControl(this.objEnroll[key], validators);
  })
  this.form = new FormGroup(this.formControls);
  }
}

子组件：无法将undefined转换为object，如何解决？

1 个答案: