I am new to angular and I have the following situation which is I have a service getAnswers():Observable<AnswerBase<any>[]>
and two components that are related to each other.
online-quote component calls the service getAnswers():Observable<AnswerBase<any>[]>
in its ngOnInit()
method and the result of this, is passed to the component dynamic-form.
To illustrate the situation this is the code of my two components:
online-quote.component.html:
<div> <app-dynamic-form [answers]="(answers$ | async)"></app-dynamic-form> </div>
online-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"); } }
dynamic-form.component.html:
<div *ngFor="let answer of answers"> <app-question *ngIf="actualPage===1" [answer]="answer"></app-question> </div>
dynamic-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); }
My question is what is the correct way to pass the information from online-quote to dynamic-form if the result information of the service getAnswers():Observable<AnswerBase<any>[]>
is a observable.
I've tried it in many ways but it does not work. I would like someone to help me with this. Thank you very much!
Assume DynamicFormService.getAnswers('CAR00PR')
is asynchronous(probably it is), using async Pipe
to pass asynchronous result is on the right way, but you cannot expect to get the asynchronous result right now when DynamicFormComponent
is created(at ngOnInit) because of Asynchonous. The result isn't ready yet when running your below line of code.
this.form = this.qcs.toFormGroup(this.answers);
There are several ways that can fix your problem.
@Input() answers
at ngOnChanges
lifehook.ngOnChanges(changes) { if (changes.answers) { // deal with asynchronous Observable result this.form = this.qcs.toFormGroup(changes.answers.currentValue); } }
DynamicFormComponent
and subscribe to it to listen to it's result.online-quote.component.html:
<app-dynamic-form [answers]="answers$"></app-dynamic-form>
dynamic-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); }) }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With