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

属性'indexOf'在类型＆＃39; FirebaseListObservable <any []>上不存在

1 个答案: