如何将可观察值传递给@Input（）Angular 4

Question

我是角度新手，我有以下情况，即我有一个服务getAnswers():Observable<AnswerBase<any>[]>and两个相互关联的组件。

• 网上报价
• 动态形式

online-quote组件在其getAnswers():Observable<AnswerBase<any>[]>方法中调用服务ngOnInit()，并将其结果传递给组件dynamic-form。

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

在线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>[]>的结果信息是可观察的，那么将信息从在线报价传递到动态表格的正确方法是什么。

我已经在很多方面尝试过，但它不起作用。我想有人帮助我。非常感谢你！

Answer 1

假设DynamicFormService.getAnswers('CAR00PR')是异步的（可能是它），使用async Pipe以正确的方式传递异步结果，但是由于Asynchonous而在DynamicFormComponent（在ngOnInit）创建时，你不能指望得到异步结果。运行下面的代码行时，结果还没有准备好。

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

有几种方法可以解决您的问题。

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.

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

Answer 2

将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$: AnswerBase<any>[];

  constructor(private service: DynamicFormService) {

   }

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

}