setValue в formArray angular 8 и показать пользовательский интерфейс

Question

Я хочу показать исходные данные в моем formArray. Я могу установить значение и показать значение в журнале консоли, но не отображать эти данные в пользовательском интерфейсе.

 ngOnInit() {
  this.getCertificate(this.id);
  this.assessmentForm = this.fb.group({
   certificateArray: this.fb.array([ this.createItem() ]),
  });
 }
 createItem(): FormGroup {
   return this.fb.group({
     confirm: '',
     score: '',
     description: ''
   });
 }

 getCertificate(id) {
   this.certificateList = [];
   this.UsersRegisterService.getCertificate(id).subscribe((res: any[]) => {
     this.certificateList = res;
     var index=0;
     this.certificateList.forEach(element => {

       this.AssessmentService.getCertificateAssessment(element.id.value).subscribe((res: any[]) => {
    if(res!=null){
      this.certificateArray.at(index).setValue(
         { confirm: res['confirm'], score: res['score']['value'],description:res['description']});    
       console.log( this.assessmentForm['controls'].certificateArray['controls'][index]['controls'].score.value);
     }
    });
    index++;
  });
});
}

Я устанавливаю значение этим методом

this.certificateArray.at(index).setValue(
   { confirm: res['confirm'], score: res['score']})

, пожалуйста, помогите мне, как я могу показать это значение в форме пользовательского интерфейса

Answer 1

Использование patchValue

this.certificateArray.at(index).patchValue(res);

Обратите внимание, что вы никогда не подпишетесь внутри подписки, а еще реже (никогда не подпишетесь) в forEach. pipe данные вместо.

Answer 2

Вы можете немного изменить свой код, прямо сейчас у вас есть скрытое имя res. Я бы регистрировал ответы от каждого звонка на getCertificateAssessment, чтобы убедиться, что вы получаете то, что ожидаете:

  getCertificate(id) {
    this.certificateList = []; // this should be set at the top of your component
    this.UsersRegisterService.getCertificate(id).pipe(
      catchError(err => {
        console.log('get cert error', err);
        return [];
      })
    ).subscribe((list) => {
      this.certificateList = list;
      this.certificateList.forEach((element, i) => {
        this.AssessmentService.getCertificateAssessment(element.id.value).pipe(
        catchError(err => {
          console.log('get assessment error', err);
          return null;
        })
      ).subscribe((res) => {
          if (res) {
            console.log('res', i, res); // be sure of response
            this.certificateArray.at(i).setValue({
              confirm: res.confirm,
              score: res.score.value,
              description: res.description
            });
          } else {
            console.log('no res!');
          }
        });
      });
    });
  }

Крис хорошо говорит о трубопроводе, но я полагаю, что эти сервисные вызовы являются запросами http, поэтомуони выполняются так же, как и обещание.

Я также добавил catchError, чтобы отследить ошибки при вызовах службы.

Плюс, вам приходится звонить по каждой оценке, что требует многозвонки. Может быть, рефакторинг вашего бэкэнда, чтобы он вызывал 1?

Если вы реорганизовали конечную точку для getCertficateAssessment, чтобы принять массив значений и вернуть массив ответов, вы можете сделать это:

    this.UsersRegisterService.getCertificate(id).pipe(
      switchMap(list => this.AssessmentService.getCertificateAssessment(list.map(l => l.id.value)))
    );

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