firebase - 'FirebaseListObservable 类型不存在属性 ‘indexOf’

Question

我正在尝试迭代并找到 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 中这些属性的等价物是什么？

Answer 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()应该可以工作，因为您现在有一个可以使用的数组对象。