Angular 4 вложенных FormArrays не может прочитать свойство 'push', равное нулю

Я не могу толкать массиву. У меня есть сегмент (идентификатор, время), в котором может быть один или несколько человек (роль, информация). поля генерируются динамически. При загрузке на странице отображаются поля (см. Изображение ниже) .
Angular 4 вложенных FormArrays не может прочитать свойство 'push', равное нулю
при попытке добавить человека я получаю ошибку: ERROR TypeError: Cannot read property 'push' of null
Вот код .ts:

addPerson(index: number) {
//let personRows3 = <FormArray>this.mySummaryForm.get('personRows3'); 
let personRows3 = <FormArray>this.mySummaryForm.get(`segmentRows3.${index}.personRows3`)
personRows3.push(this.fb.group({
    personR3: '',
    personI3: ''
}));

}

  segmentRows3: this.fb.array([
    this.fb.group({
        segmentId3: '',
        segmentTime3: '',
        personRows3: this.fb.array([
        this.fb.group({
           personR3: '',
           personI3: ''
          })
        ])
    })
  ]),

Код .html

<div formArrayName = "segmentRows3">
  <div *ngFor = " let segmentRow of mySummaryForm.controls.segmentRows3.controls; let i=index " > 
    <div  class = "form-group" [formGroupName] = "i" >   {{i+1}}
    <label for = "segmentId3">Segment ID
        <select formControlName = "segmentId3"  formControlName = "segmentId3" placeholder = "pick" type = "text" id = "segmentId3" class = "form-control" [(ngModel)] = "levelNumSegment3" (ngModelChange) = "toNumberSegment3()">
            <option *ngFor = "let level of segmentId" [value] = "level.num">{{level.name}}</option>
        </select> 
    </label>      
    <label for = "segmentTime3">Segment time
        <input formControlName = "segmentTime3" type = "text" id = "segmentTime3" class = "form-control" placeholder = "select a time" (ngModelChange) = "onChange($event)">
    </label>    
        <div formArrayName = "personRows3">
            <div *ngFor = " let personRow of segmentRow.controls.personRows3.controls; let j=index " >
                <div  class = "form-group" [formGroupName] = "j" >   {{j+1}}    
                    <label for = "personR3">person Role 
                    <input formControlName = "personR3" [typeahead] = "personRole" [typeaheadOptionsLimit] = "10" [typeaheadMinLength] = "0" type = "text" id = "personR3" class = "form-control" placeholder = "select a role" (ngModelChange) = "onChange($event)" >
                    </label>
                    <label for = "personI">Person infos
                    <input formControlName = "personI3" [typeahead] = "states" [typeaheadOptionsLimit] = "10" [typeaheadMinLength] = "0" type = "text" id = "personI3" class = "form-control" placeholder = "select infos" (ngModelChange) = "onChange($event)" >
                    </label>
                    <label><span (click) = "deletePerson(j)" class = "btn btn-danger">Remove</span></label>
                </div> 
            </div>
        </div>
        <br><button type = "button" (click) = "addPerson(j)" class = "btn btn-info">Add a person</button><br><br><br>
    </div> 
  </div>
</div>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 603
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вышеупомянутая ошибка возникает, когда ваш personRows3 равен нулю или не имеет элементов.

Добавьте чек перед тем, как нажимать элементы,

if (personRows3){
  personRows3.push(this.fb.group({
    personR3: '',
    personI3: ''
  }));
}

Благодарю. Похоже, что он не видит индекс (undefined), когда я пытаюсь добавить человека. Вы можете помочь?

mamesaye 01.05.2018 18:15

у вас должна быть кнопка внутри ngFor, чтобы передать индекс j.

Sajeetharan 01.05.2018 18:24

если я помещу его в ngfor, он будет отображаться с каждым добавленным человеком.

mamesaye 01.05.2018 18:30

в противном случае j всегда будет неопределенным

Sajeetharan 01.05.2018 18:30

хорошо спасибо. продолжу работу над этим. У меня есть еще один вопрос: когда я пытаюсь добавить сегмент, у меня появляется такая ошибка: ERROR Error: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3' почему?

mamesaye 01.05.2018 18:34

размещение addPers (i) перед <div formArrayName = "personRows3"> убирает кнопку дублирования pb.

mamesaye 01.05.2018 20:54

ответ на мою другую ошибку: stackoverflow.com/questions/50122957/…

mamesaye 02.05.2018 17:55

Другие вопросы по теме