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，但该服务正在返回rxjs Observables。

编辑：“失败可怕”=页面不会返回结果，直到被杀后变得反应迟钝，内存不断增长。根据接受的答案，这是有道理的。

Answer 1

我不知道你的意思是“非常可怕”，但这两者并不相同：

创建一个包含两个Observable的数组，稍后在模板中进行迭代。
每次更改检测需要检查此表达式是否已更改时，使用Observable创建一个新数组。这意味着thisWeeksCount()方法将被调用，经常创建大量的Observable，并且可能会向AngularFire2数据库发出大量请求。

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

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

1 个答案: