类型“FirebaseListObservable<any[]> 上不存在属性“indexOf”答案

【问题标题】：Property ‘indexOf’ does not exist on type 'FirebaseListObservable<any[]>类型“FirebaseListObservable<any[]> 上不存在属性“indexOf”
【发布时间】：2017-03-29 10:51:32
【问题描述】：

我正在尝试迭代并在 Firebase 后端中查找项目的索引，然后左右滑动浏览这些项目：

 export class articleSwiperComponent implements OnInit {

      articles: FirebaseListObservable<any[]>;

      public orientation: Orientation;
      public selectedArticle: article;

      private changeDetectorRef: ChangeDetectorRef;
      constructor(private af: AngularFire, changeDetectorRef: ChangeDetectorRef) {
        this.articles = af.database.list('/articles');

        this.changeDetectorRef = changeDetectorRef;
        this.orientation = "none";

      this.selectedArticle = this.articles[ Math.floor( Math.random() * this.articles.length ) ];


      }

我有方法可以在数据库文章中滑动，在第一次导航到此页面时会随机提出一篇文章。

   public showNextArticle() : void {

        this.orientation = "next";
        this.changeDetectorRef.detectChanges();

        var index = this.articles.indexOf( this.selectedArticle );

        this.selectedArticle = this.articles[ index + 1 ]
            ? this.articles[ index + 1 ]
            : this.articles[ 0 ]
        ;

    }
    public showPrevarticle() : void {

        this.orientation = "prev";

        this.changeDetectorRef.detectChanges();

        // Find the currently selected index.
        var index = this.articles.indexOf( this.selectedArticle );
        this.selectedArticle = this.articles[ index - 1 ]
            ? this.articles[ index - 1 ]
            : this.articles[ this.articles.length - 1 ]
        ;

    }
}

但是我收到 Property ‘indexOf’ does not exist on type 'FirebaseListObservable<any[]> Property 'length' does not exist on type 'FirebaseListObservable<any[]> 错误。 Firebase 中这些属性的等价物是什么？

【问题讨论】：

标签： firebase observable angularfire2

【解决方案1】：

我相信您的问题是您并没有真正使用数组，而是使用 AngularFire Observable（实际上是 RXJS Observable）。这意味着您需要订阅 observable 才能获取数组的实际值，因为 observable 用于在数据更改时发出数组的新值。见下文...

export class articleSwiperComponent implements OnInit, OnDestroy {
    public articles: any[] = [];
    public orientation: Orientation = 'none';
    public selectedArticle: article;
    private _articlesSubscription: Subscription;

    constructor(private af: AngularFire, private changeDetectorRef: ChangeDetectorRef) {}

    ngOnInit() {
        // Listen to database
        this._articlesSubscription = this.af.database.list('/articles').snapshotChanges().subscribe((snapshot) => {
            // Assign articles to local variable as they come in
            this.articles = snapshot.map((d) => {
                return { $key: d.key, ... d.payload };
            });

            // Only assign selected article if none assigned
            if (!this.selectedArticle) {
                this.selectedArticle = this.articles[ Math.floor( Math.random() * this.articles.length ) ];
            }            
        });
    }

    ngOnDestroy() {
        // Destroy listener to database
        this._articlesSubscription.unsubscribe();
    }
}

如果您对监听 Firebase 数据库的更改不感兴趣，您可以这样做：

export class articleSwiperComponent implements OnInit, OnDestroy {
    public articles: any[] = [];
    public orientation: Orientation = 'none';
    public selectedArticle: article;

    constructor(private af: AngularFire, private changeDetectorRef: ChangeDetectorRef) {}

    ngOnInit() {
        // Listen to first emission from database
        this.af.database.list('/articles').snapshotChanges().pipe(first()).subscribe((articles) => {
            // Assign articles to local variable
            this.articles = snapshot.map((d) => {
                return { $key: d.key, ... d.payload };
            });
            this.selectedArticle = this.articles[ Math.floor( Math.random() * this.articles.length ) ];
        });
    }
}

无论您选择哪个选项，您的showNextArticle() 都应该可以工作，因为您现在可以使用一个数组对象。

【讨论】：