Angular2 绑定可观察函数而不是属性

Question

我对某些事情感到困惑，我认为这是反应式编程的基础，所以我正在寻求一些澄清。

为什么示例 #1 有效，但示例 #2 却失败得很厉害？

示例 #1：

组件

export class AppComponent {
  weeklyCount: Observable<number>[];

  constructor(private service: MyService) {
    this.weeklyCount = [service.getCountByDay("12/18/2016"),service.getCountByDay("12/28/2016")];
  }

模板

<ul>
  <li class="text" *ngFor="let count of weeklyCount ">
    {{ count | async }}
  </li>
</ul>

示例 #2

组件

export class AppComponent {

  constructor(private service: MyService) {
  }

  thisWeeksCount(): Observable<number>[] {
    var a =  this.service.getCountByDay("12/18/2016"); 
    var b =  this.service.getCountByDay("12/28/2016"); 
    return [a,b];
  }

模板

<ul>
  <li class="text" *ngFor="let count of thisWeeksCount()">
    {{ count | async }}
  </li>
</ul>

我在服务的掩护下使用 AngularFire2，但服务是 returning rxjs Observables。

编辑："fail horribly" = 页面没有 return 结果，变得无响应直到被杀死，并且内存不断增长。根据已接受的答案，这是有道理的。

Answer 1

我不知道你所说的 "fail horribly" 是什么意思，但这两个不一样：

创建一个包含两个 Observable 的数组，稍后在您的模板中迭代。
每次变化检测需要检查这个表达式是否发生变化时，用Observables创建一个新的数组。这意味着 thisWeeksCount() 方法将被非常频繁地调用，从而创建大量 Observables，并且可能会向您的 AngularFire2 数据库发出大量请求。

所以您可能想使用第一个选项。

Angular2 绑定可观察函数而不是属性

Angular2 bind observable function instead of property

observable

rxjs

rxjs5

angular

Angular2 绑定可观察函数而不是 属性

Angular2 bind observable function instead of property

observable

rxjs

rxjs5

angular

Angular2 绑定可观察函数而不是属性