2017-06-28 36 views
1

に私は日付順にアイテムを入手必要があるが、明らかに私は、正しい順序で投稿を表示、ソート降順必要があります...降順orderByChild()firebaseとイオン2

import { 
 
    AngularFireDatabase 
 
} from 'angularfire2/database'; 
 
import 'rxjs/add/operator/map'; 
 

 
/* 
 
    Generated class for the FirebaseProvider provider. 
 

 
    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
 
    for more info on providers and Angular 2 DI. 
 
*/ 
 
@Injectable() 
 
export class FirebaseProvider { 
 

 
    constructor(public afd: AngularFireDatabase) {} 
 

 

 
    getPostsItems() { 
 
    return this.afd.list('/Posts/', { 
 
     query: { 
 
     orderByChild: "date", 
 
     } 
 
    }); 
 

 
    }

このクエリは昇順を返し、Firebase webで説明されていない子孫の順序が必要です。

私は必要なクエリは何ですか?

+1

Firebase Dat abaseは常にクエリ結果を昇順で並べ替えます。演算子を使用してそれらを反転する方法はありません。この制限を回避するには、1)クライアント側のリストを逆転させる、2)逆の値を持つプロパティを追加する(例えば '-1 * timestamp')、それをソートする2つの方法があります。 https://stackoverflow.com/questions/25611356/display-posts-in-descending-posted-orderを参照してください。 –

答えて

2

コンポーネントのテンプレートの順序を逆にする方法があります。まず、あなたが直接あなたのコンポーネントに投稿のリストを取得:

posts.component.ts

export class PostsComponent { 
    posts: FirebaseListObservable<any>; 

    constructor(db: AngularFireDatabase) { 
    this.posts = db.list('/posts', { 
     query: { 
     orderByChild: 'date' 
     } 
    }); 
    } 
} 

その後、あなたはあなたのテンプレートにご投稿の順序を逆にするreverseメソッドを使用することができます。

posts.component.html

<div *ngFor="let post of (posts | async)?.slice().reverse()"> 
    <h1>{{ post.title }}</h1> 
</div> 
0

WORそして、ngFor

posts.component.ts

export class PostsComponent { 
posts: FirebaseListObservable<any>; 

constructor(db: AngularFireDatabase) { 
this.posts = db.list('/posts', { 
    query: { 
    orderByChild: 'date' 
    } 
}); 
} 
} 

で非同期のない王、あなたのテンプレートにご投稿の順序を逆にする逆の方法を使用することができます。

投稿.component.html

<div *ngFor="let post of posts?.slice().reverse()"> 
<h1>{{ post.title }}</h1> 
</div> 
関連する問題