如何将可观察的值传递给@Input()Angular 4 [英] How to pass observable value to @Input() Angular 4

问题描述

我对angular并不陌生，并且遇到以下情况，即我有一个服务getAnswers():Observable<AnswerBase<any>[]>和两个彼此相关的组件.

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
• dynamic-form

在线报价组件使用其ngOnInit()方法调用服务getAnswers():Observable<AnswerBase<any>[]>，并将其结果传递给组件动态表单.

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:

online-quote.component.html:

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

online-quote.component.ts:

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:

dynamic-form.component.html:

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

dynamic-form.component.ts:

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);

  }

我的问题是，如果服务getAnswers():Observable<AnswerBase<any>[]>的结果信息是可观察到的，那么将信息从在线报价传递到动态表单的正确方法是什么? .

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!

推荐答案

假设DynamicFormService.getAnswers('CAR00PR')是异步(可能是)，使用async Pipe传递异步结果是正确的，但是由于 Asynchonous ，您不能指望在创建DynamicFormComponent时(在ngOnInit 处的)立即获得异步结果.运行下面的代码行时，结果尚未准备好.

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.

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

2.将Observable直接传递到DynamicFormComponent并订阅它以收听其结果.

online-quote.component.html:

2. pass Observable directly into 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:

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);
    })
}

这篇关于如何将可观察的值传递给@Input()Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！