Question

我是一个angular 7应用程序，其中包含许多不同类型的证书以及这些证书的应用程序。在创建新应用程序的过程中，我必须根据证书的类型和要实例化的应用程序从数据服务器加载数据。由于rxjs Observables从服务返回的异步特性，我试图将所有内容作为Observable从一个组件传递到另一个组件。

根据我已阅读的内容和在这里看到的其他问题的回答，我在要实例化的组件的模板中包含以下代码：

new-bcaba.component.html-模板

  <div class="open-card-BG" *ngIf="CurrentPage == 1">
    <instructions [InstCertType]="ParentCertType$ | async" [InstAppType]="ParentAppType$ | async"></instructions>
  </div>

new-bcaba.component.ts-打字稿

export class NewBcabaComponent extends ApplicationComponent implements OnInit {

  //public ParentCertType$: Observable<CertType>;
  //public ParentAppType$: Observable<AppType>;

  public constructor(NewInject: Injector) { 
    super(NewInject, '2', '1', 11);
  }

  ngOnInit() {
    super.ngOnInit();
    //this.ParentCertType$ = this.ShowCertType();
    //this.ParentAppType$ = this.ShowAppType();
  }

  private ShowCertType() : Observable<CertType> {
    console.log("... ShowCertType called ... ");
    return this.BaseCertType$;
  }

  private ShowAppType() : Observable<AppType> {
    console.log("... ShowAppType called ... ");
    return this.BaseAppType$;
  }

  // Accessors
  public get ParentCertType$() : Observable<CertType> {
    return this.ShowCertType();
  }

  public get ParentAppType$() : Observable<AppType> {
    return this.ShowAppType();
  }

我尝试过直接使用访问器和设置成员变量，但是两种方式都会导致相同的错误。

... ShowCertType called ...                           new-bcaba.component.ts:27 
... GetCertType in Certification Component called ... certification.component.ts:49
... FindCertType in Model-tools.service called ...                  model-tools.service.ts:53
... GetCertTypes in Model-tools.service called ...                  model-tools.service.ts:48

ERROR TypeError: fn is not a function                  NewBcabaComponent.html:3
    at pipe.js:18
    at Array.reduce (<anonymous>)
    at piped (pipe.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.pipe (Observable.js:91)
    at ModelToolsService.push../src/app/_services/model-tools.service.ts.ModelToolsService.FindCertType (model-tools.service.ts:55)
    at NewBcabaComponent.push../src/app/certification/certification.component.ts.CertificationComponent.GetCertType (certification.component.ts:50)
    at NewBcabaComponent.get [as BaseCertType$] (certification.component.ts:54)
    at NewBcabaComponent.push../src/app/certification/application/new-bcaba/new-bcaba.component.ts.NewBcabaComponent.ShowCertType (new-bcaba.component.ts:28)
    at NewBcabaComponent.get [as ParentCertType$] (new-bcaba.component.ts:37)
    at Object.eval [as updateDirectives] (NewBcabaComponent.html:3)

基于console.log消息，问题似乎出在我将Observable绑定到模板的方式上，但是根据我的阅读，它看起来是正确的。我在做错什么吗？

Answer 1

是的。有可能。

我创建了一个简单的代码来展示您如何轻松做到这一点：

https://stackblitz.com/edit/observable-service-x3qwbh?file=app/child/child-complonent/child-complonent.component.html

如果您想更正代码，我想您应该按以下方式更改模板：

<div class="open-card-BG" *ngIf="CurrentPage == 1">
   <instructions [InstCertType]=ParentCertType$ 
  [InstAppType]=ParentAppType$></instructions>
</div>

是否可以将返回可观察值的函数绑定到@Input？

1 个答案: