从firebase数据库

时间:2018-02-25 12:03:12

标签: angular typescript firebase firebase-realtime-database angularfire2

我再次需要你们的帮助: - )!

我想在* ngFor中对数据进行排序"已完成" enter image description here

我的数据是:

 this.db.list(`/avatars/`).valueChanges().subscribe(d => {
      this.avatarhall = d;

并在html中显示如下:

 <div *ngFor="let to of avatarhall; let i = index">
      <ion-list>
          <ion-item>
            <ion-thumbnail item-start>
              <img src="../assets/ghosts/{{to.avatar}}">
            </ion-thumbnail>
            <h1> {{to.monstername}}</h1>
            <p>Finished Tasks:{{to.finished}}</p>
            <ion-icon name="star" item-end>{{i +1}}</ion-icon>
          </ion-item>
        </ion-list>

  </div>

我的管道已创建,但我不知道如何根据已完成的值对其进行排序:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderbytask',
})
export class OrderbytaskPipe implements PipeTransform {

  transform(value: any[], args:string):any[] {

    return value.sort();
  }
}

实际上,这是应用程序的一部分,您可以在梯子上检查您的位置

3 个答案:

答案 0 :(得分:1)

您可以使用内置排序功能的javascript。

 this.db.list(`/avatars/`).valueChanges().subscribe(d => {
      this.avatarhall = d.sort((a,b) => a.finished - b.finished);

您可以在mdn

找到排序文档

答案 1 :(得分:1)

我这样做了:

this.db.list(`/avatars/`).valueChanges().subscribe(d => {

  this.avatarhall = d.sort((a,b) => (a as any).finished - (b as any).finished).reverse();

    });

希望有人会觉得这很有用。另外,感谢@ alt255的链接和启动想法,帮助我弄清楚了!

答案 2 :(得分:0)

在使用Angular fire 5.4.2和Angular 8项目时,我不得不使用以下语法。需要将参数作为QueryFn-

CategoryService.ts

getCategories():AngularFireList<any[]>{
return this.afDatabase.list('/categories', ref=>ref.orderByChild('name'));

}

并在组件内部调用getCategories方法时-

Component.ts

constructor(private categoryService: CategoryService) {
categoryService.getCategories().valueChanges().subscribe(items => {
  this.categories = items;
});

}

希望!它会工作。谢谢