Невозможно открыть форму в дочернем элементе родительского компонента - «невозможно прочитать свойство xxx»

Question

Сценарий: у меня есть список компаний , каждая из которых имеет массив проектов в качестве одной из своих переменных.Я буду отображать список компаний в родительском компоненте / html, и только при нажатии на соответствующую кнопку «Открыть» дочерний компонент открывается, чтобы отобразить список проектов для этой компании.Этот список является FormArray, который можно редактировать.

Я создал этот FormArray в качестве отдельного компонента projects для взаимодействия и выполнения операций CRUD спример данных.

Теперь моя цель - открыть форму как дочерний компонент, когда я нажимаю кнопку «Открыть» в каждой отдельной компании, как в ЭТО stackblitz.

В этом примере кажется, что this.setData(); внутри конструктора вызывает расстройство.

Я обнаружил в результате экспериментов, что, комментируя эту строку, вызывает не падение приложения, аКонечно, FormArray не будет загружен, когда я нажму кнопку «Открыть».Однако я также обнаружил, что запись {{company.name}} в дочернем компоненте DOES выводит данные компании в дочернем компоненте, поэтому он показывает, что данные проходят правильно.

Я просто не могу понять, чтоидет не так?

Answer 1

Проблема заключается в this.setData() вызове внутри SubForm конструктора класса.

Вы никогда не проверяли наличие нулевых / неопределенных данных.Итак, изначально при загрузке компонента this.company не определено.Следовательно, переменной name будет присвоено значение undefined.

Итак, когда программа пытается получить доступ к значению this.company в строке ниже, она выдает ошибку:

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

---

Решение:

Добавить ноль/ неопределенная проверка this.company перед вызовом this.setData():

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

Answer 2

Как я пытался использовать 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>

Код дочернего компонента .TS:

Импорт:

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();
  }
}

Рабочий пример

Answer 3

Попробуйте ngDoCheck () ловушка жизненного цикла

Хук жизненного цикла, который вызывает пользовательскую функцию обнаружения изменений для директивы, в дополнение к проверке, выполняемой детектором изменений по умолчанию.

ngDoCheck() {

  this.setData();

}