代码之家 › 专栏 › 技术社区 › physicsboy

无法从父组件在子组件中打开窗体-“无法读取属性xxx”

angular-material typescript angular html

1

physicsboy · 技术社区 · 7 年前

场景:我有一个公司项目

我创造了这个 FormArray 作为单机版的示例项目

我现在的目标是在单击每个公司上的“打开”按钮时,将表单作为子组件打开,如中所示 THIS

在本例中,似乎 this.setData(); 构造器内部正在引起混乱。

我通过实验发现,通过注释这一行,应用程序不会崩溃,但当我单击公司的“打开”按钮时,FormArray当然不会加载。然而,我也发现写作 {{company.name}} 在子组件中

我就是不明白出了什么问题?

3 回复 | 直到 7 年前

1

Chellappan à®µ 7 年前

尝试使用ngDoCheck()生命周期挂钩

一个生命周期钩子,用于为指令,除了默认执行的检查之外更换检测器。

ngDoCheck() {

  this.setData();

}

2

0

Saddam Pojee 7 年前

问题在于 this.setData() 打电话进来 SubForm 类构造函数。

您从未检查过空/未定义的数据。因此,最初当组件加载时, this.company 没有定义。因此,, name 变量将被赋值 undefined 价值

所以,当程序试图访问 这家公司 在下一行中,它给出了错误:

setData() {
  let control = <FormArray>this.myForm.controls.data;
  control.push(this.fb.group({
    name: this.company.name,
    ...
  }));
}

为添加空/未定义的检查 这家公司 打电话之前 :

constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      data: this.fb.array([])
    })
    if(!isNullOrUndefined(this.company)){
      this.setData();
    }
    console.log(this.company)
}

3

0

Prashant Pimpale Dila Gurung 7 年前

当我尝试StackBlitz时,为了让它工作,需要做一些更改:

您必须访问 @Input ngOnInit() 通过实施 OnInit

父组件.TS文件:

isOpened : boolean = false;  // one local variable of type boolean to open child compo

openInfo(company) {
    this.isOpened = !this.isOpened;
    this.openCompany = company;
    this.open=true;
}

父组件HTML代码:

<mat-card *ngFor="let data of DATA">
    {{data.name}}
    <button mat-raised-button (click)="openInfo(data)">open</button>
</mat-card>
<div *ngIf="isOpened">
  <subform [company]="openCompany"></subform>
</div>

导入此文件:

import {
  Component, OnInit, Input
} from '@angular/core';

和组件类别:

export class SubForm implements OnInit {

@Input() company: any;
myForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
   this.myForm = this.fb.group({
      data: this.fb.array([])
   })
   console.log(this.company);
   this.setData();
  }
}

A working example