JavaScript数组不一致性

我有一个数组。我正在处理一些问题，所以

在我的代码中，我放置了以下调试代码：

console.log(this.pages);
console.log(this.pages.length);

---

Chrome调试窗口中的输出如下所示。您将看到第一个显示长度：38，但第二个console.log显示长度为0。为什么第二个也不显示38

---

从'@angular/core'导入{Injectable}；
从“angularfire2”导入{AngularFire，FirebaseListObservable}；
@可注射（）
导出类SitemapService{
pagesObservable:FirebaseListObservable；
页码：任意[]=[]；
数据：字符串=“”；
建造师(
保护af:AngularFire，
专用日期管道：日期管道，
专用urlPipe:urlPipe
){
this.pagesObservable=this.af.database.list（'/pages'，{
查询：{
orderByChild:“sortOrder”，
限时：100
},
保存快照：true
})
this.pagesObservable.subscribe（快照=>{
snapshots.forEach（snapshot=>{
this.pages.push（JSON.stringify（snapshot.val（））；
})
})
}
getSitemapData（）：字符串{
设urlBase=location.protocol+'/'+location.host；
console.log（this.pages）；
console.log（this.pages.length）；
返回（该数据）；
}
}

试试这一款可能适合你

alert(Object.keys(this.pages).length);

---

不要在构造函数中执行异步操作，比如

subscribe

。你将无法知道它何时完成<代码>新建不是异步的。在继续之前，它不会等待构造函数中的某些异步逻辑完成。无论从何处调用

getSiteMapData

，几乎可以肯定的是，构造函数中的异步内容还没有完成。在您的情况下，只需在构造函数中设置可观察对象

您对AngularFire列表观察值的工作方式非常困惑。当你订阅的时候，你就可以得到数据本身。它不会给你快照，你必须

forEach

接管

val（）

并做一些事情。在您的情况下，您不需要，也不想要，

preservesapshots

选项，除非您正在做一些特殊的事情

import { Injectable } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Injectable()
export class SitemapService {
    pagesObservable: FirebaseListObservable<any[]>;
    pages: any[] = [];
    data: string = '';
    constructor(
        protected af: AngularFire, 
        private datePipe: DatePipe,
        private urlPipe: UrlPipe
    ){
        this.pagesObservable = this.af.database.list('/pages', { 
            query: {
                orderByChild: 'sortOrder',
                limitToLast: 100
            }
        });
    }

    getSitemapData(): string {
      let urlBase = location.protocol + '//' + location.host;
      this.pagesObservable.subscribe(pages => {
        console.log(pages);
        console.log(pages.length);
      });
  }
}

这通常是一个更好的解决方案——让Angular为您订阅（和取消订阅）。如果您确实想要组件上的

pages

属性，那么您可以这样做

ngOnInit() {
  this.pagesSubscription = this.pagesObservable.subscribe(pages => this.pages = pages);
}

// MAKE SURE TO DO THIS!
ngOnDestroy() {
  this.pagesSubscription.unsubcribe();
}

但是在将来的某个时刻之前，你不会有

这个.pages

。因此，如果您想在模板或其他地方使用它，您必须确保它已设置：

<div *ngIf="pages">I now have the pages!!</div>

我现在有页面了！！

-您能分享可执行的演示/代码片段吗？在您的代码中，

console.log

的顺序是否与您在上述代码片段中共享的顺序相同？这是一个众所周知的问题，与devtools如何显示并更新其显示内容有关。你可以用谷歌搜索。初始显示（显示空数组）是调用

console.log

时的状态。单击向下箭头将其打开时，将显示当前状态。@eat sleep code-

length

属性表示在该特定时间点阵列中的项目数。。当计数改变时，它不会自动更新！你是如何填充你的数组的…给我们看一些代码。“它可能对你有用”请不要基于你的假设发布答案。。。我可以看到

length

属性，因此它在我看来是数组…这仍然报告为0。谢谢。我对棱角分明的人很陌生，而且是自学成才的。我在谷歌搜索答案时发现了一个例子。今晚我要试试你建议的改变。

ngOnInit() {
  this.pagesSubscription = this.pagesObservable.subscribe(pages => this.pages = pages);
}

// MAKE SURE TO DO THIS!
ngOnDestroy() {
  this.pagesSubscription.unsubcribe();
}

<div *ngIf="pages">I now have the pages!!</div>