Question

我需要按降序从Firebase获取数据。

当组件第一次加载时，它会正常运行。

  fetchData(){
    return this.af.list('/path/path/',{
      query: {
        orderByChild: 'createdAt'
      }
    }).map(arr => {return arr.reverse();});
  }

来自获取广告的数据存储在var中，然后显示。

但现在问题是var在运行时被修改，用户可以更新var数组，或者删除或添加var数组。

当任何这些操作发生时，数据在firebase数据库上被修改，并再次调用获取数据。

然后反过来再次显示整个事情用得更少。

我的意思是在第一个组件加载之后，var是1,2,3,4。但是当我们添加到var而不是成为1,2,3,4,5时，它变为5,4,3,2,1。

这非常令人困惑，但我试了很多但却无法解决这个问题。

更新

 ngOnInit() {

    this.display = this.route.snapshot.data['Auth'];

    if(this.display){
      this.showProgress = true;
      this.user = JSON.parse(localStorage.getItem("user"));
      this.service.fetchData().subscribe((data) => {
        this.comments = data;
        this.showProgress = false;
      });
    } else {
      this.afAuth.authState.subscribe((data) => {
        if (data) {
          localStorage.setItem("user", JSON.stringify(data));
          this.user = data;
          this.service.fetchData().subscribe((res) => {
            this.comments = res;
            this.showProgress = false;
          });
        } else {
          this.comments = null;
        }
      });

这是在运行时发生的事情休息所有是我们添加更新或删除时发生的angular2firebase的crud函数

我尝试使用相同的管道但是它在获取索引时会导致问题所以我放弃了计划，因为它太复杂了

add(){
    this.service.postComment(this.comment, this.user);
  }

  editComment(key:string,updatedComment:any){
    const index = ((this.page-1)*5)+i;
    const updated = this.comments[index];
    updated.comment  = comment;
    this.service.editComment(updated.$key,updated);
  }

  deleteComment(key:String){
   this.service.deleteComment(this.comments[index].$key);
  }

Answer 1

我相信你有一个错字：

  editComment(key:string,updatedComment:any){
    this.service.editComment(updatedComment.$key, updatedComment); // I changed `updated` to `updatedComment`
  }

您可以做的另一件事是遵循您的反向自定义管道方法，当您这样做时，请从reverse()中的map()移除fetchData()。

反向管道

import {Pipe} from 'angular2/core';

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe {
  transform (values) {
    if (values) {
      return values.reverse();
    }
  }
}

<强>更新

尝试将映射和反向响应声明为FirebaseListObservable<any[]>。

 fetchData(){
    return this.af.list('/path/path/',{
      query: {
        orderByChild: 'createdAt'
      }
    }).map((array) => array.reverse()) as FirebaseListObservable<any[]>;
  }

Answer 2

这种概述有帮助吗？

APP-module.ts

import {firebaseConfig} from "../firebase.config";
@ngModule({
 imports: [
  AngularFireModule.initializeApp(firebaseConfig)

  ]

})

firebase.config.ts

export const firebaseConfig = {
    apiKey: "<your api key>",
    authDomain: "....",
    databaseURL: "....",
    storageBucket: "...",
    messagingSenderId: "..."
};

MY-component.ts

import {Component, OnInit} rrom '@angular/core';
import {AngularFireDatabase} from 'angularfire2';
import {Data} from "../shared/model/data"; //insert your domain class here & in code

export class MyComponent implements OnInit {
   data: Data[];
   constructor(private db: AngularFireDatabase) {}

    ngOnInit() {
        this.db.list('data', {
            query: {
                orderByKey: true,
                limitToLast: 10
            }
        })
            .do(console.log)
            .subscribe(
                data => this.data = data
            );
    }
}

MY-component.html

<table *ngIf="data">
  <tr *ngFor="let row of data">
      <td>{{row.column}}</td>
   </tr>
</table>
<div *ngIf="! data">Loading ...</div>

以下是第一次来到此主题的其他用户的链接：

<强>更新

我相信你原来问题的评论中的对话，问题在于

this.display = this.route.snapshot.data['Auth'];

是一个异步过程，因此您可以订阅if else分支的两半。

您需要 RouterDataResolver 并将if / else块移入其中。
请参阅我的问题here，该问题将为您提供如何继续的路线图。

从Firebase获取数据按降序排列

2 个答案: