angular - 根据 ionic 中的创建日期对用户列表进行排序

Question

我是 Ionic 的新手，正在做一个项目，我有一个用户可以登录的应用程序，输入他们的详细信息我还有一个管理页面，我在其中列出了已注册到应用程序的用户列表按升序排序电子邮件，但我希望它根据注册日期进行排序，以便我将新用户放在顶部

我的.html

 <ion-list class="the-list">
          <ion-item lines="none" *ngFor="let item of usersList">
            <ion-avatar slot="start">
              <img src="assets/imgs/person.jpg" />
            </ion-avatar>
            <ion-label>
              <h2>{{item.email}}</h2>
              <ion-button text-left (click)="navigateDetails(item)" fill="clear">
                View Profile
              </ion-button>
            </ion-label>
            <div class="end-slot" slot="end">
              <ion-button fill="clear" *ngIf="item.isClaimed">
                <ion-icon slot="start" name="checkmark-circle-outline"></ion-icon> Claimed
              </ion-button>
              <ion-button color="success" *ngIf="!item.isClaimed" (click)="navigateDetails(item)">
                Claim
              </ion-button>
            </div>
          </ion-item>
        </ion-list> 

我的.ts

import { Component, OnInit, NgZone } from "@angular/core";
import { MainService } from "./main.service";
import { LoadingController } from "@ionic/angular";
import { FirebaseService } from "../services/firebase.service";
import { User } from "../shared/types/user.type";
import { Router, ActivatedRoute, ParamMap, Params } from "@angular/router";

@Component({
  selector: "app-main",
  templateUrl: "./main.page.html",
  styleUrls: ["./main.page.scss"]
})
export class MainPage implements OnInit {
  constructor(
    public mainService: MainService,
    private firebaseService: FirebaseService,
    private loadingCtrl: LoadingController,
    private ngZone: NgZone,
    private router: Router,
    private route: ActivatedRoute
  ) {}
  usersList: any;
  ngOnInit() {
    this.loadUserdetailsData();
    this.route.queryParams.subscribe((params: any) => {
      if `(params.isRedire`cted) {
        this.loadUserdetailsData();
      }
    });
  }

  loadUserdetailsData() {
    if (this.mainService.user.isModerator) {
      this.loadingCtrl
        .create({ keyboardClose: true, message: "Loading details..." })
        .then(loadingEl => {
          loadingEl.present();
          this.firebaseService.getUserList().subscribe(
            res => {
              this.ngZone.run(() => {
                console.log(res);

                this.usersList = res;
                loadingEl.dismiss();
              });
            },
            err => {
              loadingEl.dismiss();
            }
          );
        });
    }
  }

  navigateDetails(item: User) {
    if (item.createdAt["seconds"]) {
      item.createdAt = new Date(item.createdAt["seconds"] * 1000);
    }
    this.router.navigate(["/main", item.email], {
      state: { data: { user: item } }
    });
  }
}

我的 .firebase.service

  public getUserDetails(): Observable<User> {
    return new Observable<User>(observer => {
      const email = localStorage.getItem("email");
      const docRef = this.afs.doc(`users/${email}`);
      const userData = docRef.get().subscribe(
        (res: any) => {
          console.log("userData", res.data());
          observer.next(res.data());
          observer.complete();
        },
        err => {
          observer.error(err);
        }
      );
    });
  }

  public getUserList(): Observable<any> {
    return new Observable<any>(observer => {
      const userCollection = this.afs.collection("users");
      userCollection.valueChanges().subscribe(res => {
        observer.next(res);
        observer.complete();
      });
    });
  }

  public updateUser(email: string, values: any): Observable<any> {
    return new Observable<any>(observer => {
      const docRef = this.afs.doc(`users/${email}`);
      docRef.set(values).then(
        res => {
          observer.next(res);
          observer.complete();
        },
        err => {
          observer.error(err);
        }
      );
    });
  }```

标签： angularionic-frameworkionic3ionic4

Answer 1

替换this.usersList = res;为：

this.userList = res.sort((userA, userB) => {
  return userB.signupDate - userA.signupDate;
});

当然，你应该signupDate用你自己的领域来代替。