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

问题描述

我是 angular 的新手，我有以下情况，即我有一个服务 getAnswers():Observable[]> 和两个相互关联的组件.

• 在线报价
• 动态形式

online-quote 组件在其 ngOnInit() 中调用服务 getAnswers():Observable[]>方法及其结果被传递给组件dynamic-form.

为了说明情况，这是我的两个组件的代码:

online-quote.component.html:

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

online-quote.component.ts:

@Component({选择器:'app-online-quote',templateUrl: './online-quote.component.html',styleUrls: ['./online-quote.component.css'],提供者:[DynamicFormService]})导出类 OnlineQuoteComponent 实现 OnInit {公开答案$:Observable;构造函数(私有服务:DynamicFormService){}ngOnInit() {this.answers$=this.service.getAnswers("CAR00PR");}}

dynamic-form.component.html:

<app-question *ngIf="actualPage===1" [answer]="answer"></app-question>

dynamic-form.component.ts:

@Component({选择器:'app-dynamic-form'，templateUrl: './dynamic-form.component.html',styleUrls: ['./dynamic-form.component.css'],提供者:[ AnswerControlService ]})导出类 DynamicFormComponent 实现 OnInit {@Input() 答案:AnswerBase[];构造函数(私有 qcs:AnswerControlService，私有服务:DynamicFormService){}ngOnInit() {this.form = this.qcs.toFormGroup(this.answers);}

我的问题是，如果服务 getAnswers() 的结果信息，将信息从 online-quote 传递到 dynamic-form 的正确方法是什么:Observable[]> 是一个可观察对象.

我尝试了很多方法，但它不起作用.我希望有人能帮我解决这个问题.非常感谢！

解决方案

假设 DynamicFormService.getAnswers('CAR00PR') 是 异步的(可能是)，使用 async Pipe 传递异步结果是正确的方式，但是当 DynamicFormComponent 被创建(at ngOnInit) 因为异步.运行下面的代码行时，结果还没有准备好.

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

有多种方法可以解决您的问题.

1.在 ngOnChanges lifehook 上收听 @Input() 答案 的 valueChange.

ngOnChanges(changes) {如果(changes.answers){//处理异步 Observable 结果this.form = this.qcs.toFormGroup(changes.answers.currentValue);}}

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

online-quote.component.html:

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

dynamic-form.component.ts:

@Component({...})导出类 DynamicFormComponent 实现 OnInit {@Input() 答案:Observable;ngOnInit() {this.answers.subscribe(val => {//处理异步 Observable 结果this.form = this.qcs.toFormGroup(this.answers);})}

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

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.

1. listen to valueChange of @Input() answers at ngOnChanges lifehook.

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

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:

@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屋！