Как передать наблюдаемое значение в @Input() Угловое 4

Я новичок в угловом, и у меня есть следующая ситуация: у меня есть служба getAnswers():Observable<AnswerBase<any>[]> и два компонента, которые связаны друг с другом.

  • онлайн-цитаты
  • динамическая форма

компонент online-quote вызывает службу getAnswers():Observable<AnswerBase<any>[]> в своем ngOnInit() и результат этого передается динамической форме компонента.

Чтобы проиллюстрировать ситуацию, это код моих двух компонентов:

онлайн-quote.component.html:

 <div>
    <app-dynamic-form [answers]="(answers$ | async)"></app-dynamic-form>
</div>

онлайн-quote.component.ts:

@Component({
  selector: 'app-online-quote',
  templateUrl: './online-quote.component.html',
  styleUrls: ['./online-quote.component.css'],
  providers:  [DynamicFormService]
})
export class OnlineQuoteComponent implements OnInit {

  public answers$: Observable<any[]>;

  constructor(private service: DynamicFormService) {

   }

  ngOnInit() {
    this.answers$=this.service.getAnswers("CAR00PR");
  }

}

динамико-form.component.html:

<div *ngFor="let answer of answers">
 <app-question *ngIf="actualPage===1" [answer]="answer"></app-question>
</div>

динамические-form.component.ts:

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css'],
  providers: [ AnswerControlService ]
})
export class DynamicFormComponent implements OnInit {
  @Input() answers: AnswerBase<any>[];

  constructor(private qcs: AnswerControlService, private service: DynamicFormService) {  }

  ngOnInit() {

    this.form = this.qcs.toFormGroup(this.answers);

  }

Мой вопрос заключается в том, как правильно передавать информацию из онлайн-цитаты в динамическую форму, если информация о результатах службы getAnswers():Observable<AnswerBase<any>[]> является наблюдаемой.

Я пробовал это разными способами, но это не работает. Я хотел бы, чтобы кто-то помог мне с этим. Большое спасибо!

Ответы

Ответ 1

Предположим, что DynamicFormService.getAnswers('CAR00PR') является асинхронным (возможно, так и есть), и использование async Pipe для передачи асинхронного результата идет по правильному пути, но вы не можете ожидать получения асинхронного результата прямо сейчас, когда DynamicFormComponent (в ngOnInit), поскольку асинхронный. Результат еще не готов при запуске строки кода ниже.

this.form = this.qcs.toFormGroup(this.answers);

Есть несколько способов, которые могут решить вашу проблему.

1. прослушайте значение valueChange из @Input() answers при помощи ngOnChanges lifehook.

ngOnChanges(changes) {
  if (changes.answers) {
    // deal with asynchronous Observable result
    this.form = this.qcs.toFormGroup(changes.answers.currentValue);
  }
}

2. передать Observable непосредственно в DynamicFormComponent и подписаться на него, чтобы прослушать его результат.

онлайн-quote.component.html:

<app-dynamic-form [answers]="answers$"></app-dynamic-form>

динамические-form.component.ts:

@Component({
  ...
})
export class DynamicFormComponent implements OnInit {
  @Input() answers: Observable<AnswerBase[]>;

  ngOnInit() {
    this.answers.subscribe(val => {
      // deal with asynchronous Observable result
      this.form = this.qcs.toFormGroup(this.answers);
    })
}

Ответ 2

изменить онлайн-quote.component.ts: на следующий

    @Component({
  selector: 'app-online-quote',
   templateUrl: './online-quote.component.html',
  styleUrls: ['./online-quote.component.css'],
  providers:  [DynamicFormService]
})
export class OnlineQuoteComponent implements OnInit {

  public answers$: AnswerBase<any>[];

  constructor(private service: DynamicFormService) {

   }

  ngOnInit() {
    this.service.getAnswers("CAR00PR").subscribe(success=>{this.answers$=success;});
  }

}