Angular 4 вложенных formArray / formGroup вернуть значение в форму из запроса БД

У меня есть вложенный массив. Я хочу отредактировать значения в своей форме, поэтому я сделал запрос к БД, чтобы получить значения для редактирования, но я не могу поместить их (значения personRows3) в правое поле ввода. personRows3 - это вложенный массив форм, который имеет одну или несколько групп форм (personI3, personR3), см. seg_inf ниже. Я получаю сообщение об ошибке:
Error: Cannot find control with path: 'segmentRows3 -> 0 '
Вот код .html

<form *ngIf = "row" [formGroup] = "myEditSummaryForm" (ngSubmit) = "saveASummary(myEditSummaryForm.value)">
<div class = "container">
<div formArrayName = "segmentRows3">
  <div *ngFor = " let seg of seg_inf; let i= index " > 
    <div  class = "form-group" [formGroupName] = "i" >    <---error line----
      <label for = "segmentId3">Segment ID {{i+1}}  
        <input type = "text" formControlName = "segmentId3" id = "segmentId3" class = "form-control" value = "{{i+1}}" >          
      </label>   
      <label><span *ngIf = "seg_inf.length > 1" (click) = "deleteSegment(i)" class = "btn btn-danger">Remove segment</span></label>
      <label for = "segmentTime3">Segment time : 
        <timepicker formControlName = "segmentTime3" (ngModel) = "segmentTime3" [showMeridian] = "isMeridian" [showSpinners] = "showSpinners"> </timepicker> </label> 
      <button type = "button" (click) = "addPerson(i)" class = "btn btn-info">Add a person</button>
       {{seg.personRows3 |json}}<br>
      <div formArrayName = "personRows3">
        <div *ngFor = " let per of seg.personRows3; let j=index " > 
          <div class = "form-group" [formGroupName] = "j">   #{{j+1}}   
            <label for = "personR3">Segment type 
              <input formControlName = "personR3" [typeahead] = "personRole" type = "text" id = "personR3" class = "form-control">
            </label>
            <label for = "personI3">Person name   
              <input formControlName = "personI3" [typeahead] = "states" type = "text" id = "personI3" class = "form-control">
            </label>
            <label><span *ngIf = "seg_inf.length > 1" (click) = "deletePerson(i,j)" class = "btn btn-warning">Remove</span></label>
          </div>
        </div>
      </div>
      <label for = "topic">Topic</label>
        <textarea formControlName = "topic" id = "topic" class = "form-control" (ngModelChange) = "onChange($event)"></textarea>  
    </div>            
  </div>
</div>
<button type = "button" (click) = "addSegment(i)" class = "btn btn-primary">Add a segment</button>  
</div>
 <div>
  <button class = "btn btn-success form-control" 
(click) = "saveASummary(myEditSummaryForm.value)"> Save update(s)</button>
 </div>             
</form> 

Вот код .ts

for (var i = 0, len = this.seg_inf.length; i < len; i++) {
  let segmentRows3 = <FormArray>this.myEditSummaryForm.get('segmentRows3');
  segmentRows3.push(
    this.fb.group({
    segmentTime3: this.seg_inf[i].segmentTime3, 
    segmentId3: i+1, 
    topic: this.seg_inf[i].topic,    
    PersonRows3: this.getPerson(this.seg_inf, i),       //function call
      })
    );
  }    


 getPerson(s_i: any[], index: number) {
let s_i_prl = s_i[index].personRows3.length;
let s_i_pr = s_i[index].personRows3;
// get all people for that segment
for (var j = 0, lenj=s_i_prl; j < lenj; j++) {
  let personRows3 = <FormArray>this.myEditSummaryForm.get(`segmentRows3.${index}.personRows3`)
  this.fb.array([
    this.fb.group({
        personR3: s_i_pr[j].personR3,
        personI3: s_i_pr[j].personI3, 
        })
    ])
  }
}   


this.seg_inf = [{"segmentTime3":"2018-05-23T14:20:00.051Z","segmentId3":"","topic":"topic1",   
"personRows3":[{"personR3":"HS - host","personI3":"California"},{"personR3":"GS - guest","personI3":"Alaska"}]},   
 {"segmentTime3":"2018-05-23T14:30:00.533Z","segmentId3":"","topic":"topic2",   
 "personRows3":[{"personR3":"HS - host","personI3":"Arizona"}]}]   

Все работает, пока я не попробую заполнить поля ввода для personRows3!
Вы можете увидеть: {{seg.personRows3 |json}} после Add a person button

Angular 4 вложенных formArray / formGroup вернуть значение в форму из запроса БД

Вот нерабочий код. Что мне не хватает?

После ответа @yurzui:
Angular 4 вложенных formArray / formGroup вернуть значение в форму из запроса БД

Поведение ключевого слова "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
599
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Это не должно быть так сложно, как в вашем методе getPerson, который на самом деле не что-то возвращает.

Вы можете использовать следующий код:

personRows3: this.getPerson(this.seg_inf[i].personRows3);
...

getPerson(personRows: any[]) {
  return this.fb.array(
    personRows.map(p => this.fb.group({
      personR3: p.personR3,
      personI3: p.personI3,
    })
  ))
}

Здесь я возвращаю FormArray из FormGroups, которые основаны на вашем массиве personRows3.

Вы также можете проверить это в Пример ng-run

Большое спасибо за Вашу помощь. но я получаю еще одну ошибку: Error: Cannot find control with path: 'segmentRows3 -> 0 -> personRows3', и он не зацикливается на personRows3, ​​см. изображение, о котором идет речь. Спасибо

mamesaye 24.05.2018 19:28

Вы можете проверить это? stackblitz.com/edit/…

yurzui 24.05.2018 20:02

Не вижу разницы. Вы можете взглянуть на это: stackblitz.com/edit/…, это все приложение! вы увидите ошибку в консоли Error: Cannot find control with path: 'segmentRows3 -> 0 -> personRows3' Спасибо

mamesaye 24.05.2018 21:30

Первая буква в пersonRows3 должна быть в нижнем регистре.

yurzui 24.05.2018 21:32

См. Комментарий, начинающийся с yurzuistackblitz.com/edit/angular-4bvapp?file=src/app/…

yurzui 24.05.2018 21:33

ты можешь помочь с этим? stackoverflow.com/questions/50399557/… спасибо.

mamesaye 24.05.2018 21:37

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