RXJS:问题使UI根据继承类更新可观察的

Question

当html元素绑定到依赖基类可观察到的函数的返回值时，我遇到了一个问题。

。

这是一个高度人为的例子。问题在于，当加载组件并且HTML元素渲染时，在组件中的getColor()中导致会员变量orange为null。

我确实看到Orange类的initialize被调用，并且正确设置了color的值。但是，这不会导致UI刷新。知道我可能做错了什么？

谢谢!!!

//--------------------
//app.component.html:
  <div> {{ getColor() }}

//-----------------------
//app.component.ts
export class AppComponent {
  orange: IOrange
  constructor() {
    orange = new navelOrange()
  }
  getColor() {
      orange.getColor();
  }
}
//-------------------
//orange.ts
export class Orange {
  color: Color;
  initialize() {
    // let's say there is a fruit service that we injected
    let orangeColor$ = this.fruitService.getOrangeColor();
    orangeColor$.subscribe( data => this.color = data);
  }  
}
//--------------------
//navelOrange.ts
export class NavelOrange extends Orange{
  constructor() {
    super();
    initialize(); // allows base class to call service to initialize members
  }
  getColor() {
    return this.color; // from base class
  }
}

Answer 1

您的模板正确吗？

{{ getColor{}()  }} 

我希望这会失败。应该是

{{ getColor()}}