Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular2绑定可观测函数而不是属性_Angular_Rxjs_Observable_Rxjs5 - Fatal编程技术网

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

Angular2绑定可观测函数而不是属性,angular,rxjs,observable,rxjs5,Angular,Rxjs,Observable,Rxjs5,我对一些事情感到困惑,我认为这是反应式编程的基本原理,所以我希望得到一些澄清 为什么示例1有效,而示例2却失败得可怕 示例#1: 组成部分 export class AppComponent { weeklyCount: Observable<number>[]; constructor(private service: MyService) { this.weeklyCount = [service.getCountByDay("12/18/2016"),serv

我对一些事情感到困惑,我认为这是反应式编程的基本原理,所以我希望得到一些澄清

为什么示例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")];
  }
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];
  }
导出类AppComponent{
周计数:可观察[];
构造函数(私有服务: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>
<ul>
  <li class="text" *ngFor="let count of thisWeeksCount()">
    {{ count | async }}
  </li>
</ul>
  • {{count | async}}
示例#2

组成部分

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

  constructor(private service: MyService) {
    this.weeklyCount = [service.getCountByDay("12/18/2016"),service.getCountByDay("12/28/2016")];
  }
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];
  }
导出类AppComponent{
构造函数(私有服务:MyService){
}
thisWeeksCount():可观察[]{
var a=此.service.getCountByDay(“12/18/2016”);
var b=此.service.getCountByDay(“12/28/2016”);
返回[a,b];
}
模板

<ul>
  <li class="text" *ngFor="let count of weeklyCount ">
    {{ count | async }}
  </li>
</ul>
<ul>
  <li class="text" *ngFor="let count of thisWeeksCount()">
    {{ count | async }}
  </li>
</ul>
  • {{count | async}}
我在服务的掩护下使用AngularFire2,但服务返回rxjs可观测值


编辑:“严重失败”=页面不返回结果,直到被终止才会响应,并且内存不断增长。根据公认的答案,这是有意义的。

我不知道“严重失败”是什么意思,但这两个词并不相同:

  • 创建一个包含两个观察值的数组,稍后在模板中迭代

  • 每次更改检测需要检查此表达式是否已更改时,都会创建一个包含可观察对象的新数组。这意味着将非常频繁地调用
    thisWeeksCount()
    方法来创建大量可观察对象,并可能对AngularFire2数据库发出大量请求


  • 因此,您可能希望使用第一个选项。

    以哪种方式失败?啊,这是因为该方法正在触发更改检测。谢谢!