Question

我需要对firebase集合中字段的基于值的列表进行排序。该字段称为“ rankeamento”，其最大值为10，最小值为0。列表必须首先引入具有最大值的项目，依此类推。（此列表将以幻灯片的形式添加。）

我在管道上进行了研究，但仍然失败

HTML =>

<ion-slides>
        <ion-slide *ngFor="let produto of produtos">
          <ion-card>
            <ion-card-header>
              <ion-card-title>{{ produto.nome }}</ion-card-title>
            </ion-card-header>

            <ion-card-content>
              <ion-avatar slot="start">
                <ion-img [src]="produto.caminho_imagem"></ion-img>
              </ion-avatar>
            </ion-card-content>

            <div class="ion-text-center ion-padding-bottom ion-padding-top">
              <ion-checkbox></ion-checkbox>
            </div>
          </ion-card>
        </ion-slide>
      </ion-slides>

TS =>

public produtos: any[] = [];

ngOnInit() {

    this._firestoreService.getCollection('produto')
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(produtos => {
        // FIELD PRODUTO.RANKEAMENTO \\
        this.produtos = produtos;
        this.loading = false;
      });

    this.modoUso.valueChanges
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(value => this.onChangeModoUso.emit(value));

  }

Answer 1

Angular不再提供任何用于排序的管道（例如orderBy管道）。您可以通过here阅读更多有关它的内容。

但是，您可以选择使用JavaScript的Array.sort()在subscribe()块返回可观察值之后对列表进行排序。

this._firestoreService.getCollection('produto')
  .pipe(takeUntil(this._unsubscribeAll))
  .subscribe(produtos => {
    // FIELD PRODUTO.RANKEAMENTO \\
    this.produtos = produtos.sort((a, b) => b.rankeamento - a.rankeamento);
    this.loading = false;
  });

基于字段值的降序排序列表

1 个答案: