时间戳

首页 > 解决方案 > 在Angular中的两个ngFor上按日期排序

html - 在Angular中的两个ngFor上按日期排序

问题描述

我有两个数组来自两个不同的 API，每个来自不同的数据库，并按日期降序排列。当我在 html 中显示它们时，我希望将 2 'ngFor's 重新排列为按日期降序排列。目前，输出将如下所示

日期 内容1 内容二
2021 年 3 月 5 日 来自数据库 1 的内容 来自数据库 1 的内容
2021 年 3 月 3 日 来自数据库 1 的内容 来自数据库 1 的内容
2021 年 3 月 3 日 来自数据库 1 的内容 来自数据库 1 的内容
2021 年 3 月 10 日 来自数据库 2 的内容 （空的）
2021 年 3 月 2 日 来自数据库 2 的内容 （空的）

但是，我希望它们看起来像这样

日期 内容 内容二
2021 年 3 月 10 日 来自数据库 2 的内容 （空的）
2021 年 3 月 5 日 来自数据库 1 的内容 来自数据库 1 的内容
2021 年 3 月 3 日 来自数据库 1 的内容 来自数据库 1 的内容
2021 年 3 月 3 日 来自数据库 1 的内容 来自数据库 1 的内容
2021 年 3 月 2 日 来自数据库 2 的内容 （空的）

有没有办法重新排列它们或将两个'ngFor'放入一个新的'ngFor'并再次订购它们？请建议或分享我可以研究的任何可用资源，谢谢。

==================================================== ===============

编辑后的附加信息

组件 TS：

import { APIService } from '.../api.service';

export class AppComponent {
  array1;
  array2;

  constructor( public service: APIService; ) { } 

  ngOnInit() {
      this.apiServiceGet1(),
      this.apiServiceGet2(),
  }

  //Service Call
  apiServiceGet1() {
     this.service.get1().subscribe(result => {
     this.array1 = result;
     })
  }
  apiServiceGet2() {
     this.service.get2().subscribe(result => {
     this.array2 = result;
     })
  }
}

服务TS：

import { HttpClient } from '@angular/common/http';
@Injectable()
export class APIService {
   constructor ( public http: HttpClient ) { }
   
   public get1(): Observable<Array<Data>> {
      return this.http
        .get<Array<Data>>("api_endpoint")
        .pipe(map(response => response))
   }
   public get2(): Observable<Array<Data>> {
      return this.http
        .get<Array<Data>>("api_endpoint2")
        .pipe(map(response => response))
   }
}

HTML：

<table>
   <th> 
      <td>Date</td>
      <td>Content 1</td>
      <td>Content 2</td>
   </th>
   <tr *ngFor="let data of array1">
      <td> {{ data.Date }} </td>
      <td> {{ data.Content1 }} </td>
      <td> {{ data.Content2 }} </td>
   </tr>
   <tr *ngFor="let data of array2">
      <td> {{ data.Date }} </td>
      <td> {{ data.Content1 }} </td>
      <td> {{ data.Content2 }} </td>
   </tr>
</table>

标签： htmlangularsortingngfor

解决方案

给你，认为这就是你正在寻找的一个例子。

export class AppComponent {
  joinedApiCall$: Observable<Array<Data>>;

  ngOnInit() {
    this.joinedApiCall$ = forkJoin(
      this.apiServiceGet1(),
      this.apiServiceGet2(),
    ).pipe(
      map(([first, second]) => {
        const unsorted = [...first, ...second]; // Merge two arrays
        return unsorted.sort((a, b) => b.Date - a.Date);
      })
    );
  }


  // Mock Service Call
  apiServiceGet1(): Observable<Array<Data>> {
    return of([
      {
        Date: 5,
        Contents: "contents from database 1"
      } as Data,
      {
        Date: 3,
        Contents: "contents from database 1"
      } as Data,
      {
        Date: 1,
        Contents: "contents from database 1"
      } as Data,
    ]);
  }

   // Mock Service Call
   apiServiceGet2(): Observable<Array<Data>> {
    return of([
      {
        Date: 10,
        Contents: "contents from database 2"
      } as Data,
      {
        Date: 2,
        Contents: "contents from database 2"
      } as Data
    ]);
  }
}

HTML：

<div *ngIf="this.joinedApiCall$">
  <div *ngFor="let data of this.joinedApiCall$ | async">
    <ul>
      <li>{{ data.Date }}</li>
    </ul>
  </div>
</div>

推荐阅读