Angular 中的两个 ngFor 按日期排序

Question

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

Date	Content 1	Content 2
5 Mar 2021	contents from database 1	contents from database 1
3 Mar 2021	contents from database 1	contents from database 1
3 Mar 2021	contents from database 1	contents from database 1
10 Mar 2021	contents from database 2	(empty)
2 Mar 2021	contents from database 2	(empty)

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

Date	Contents	Content 2
10 Mar 2021	contents from database 2	(empty)
5 Mar 2021	contents from database 1	contents from database 1
3 Mar 2021	contents from database 1	contents from database 1
3 Mar 2021	contents from database 1	contents from database 1
2 Mar 2021	contents from database 2	(empty)

有没有办法重新排列它们或将两个 '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;
     })
  }
}

服务技术人员：

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>

Answer 1

给你，这就是你要找的例子。

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>

Angular 中的两个 ngFor 按日期排序

Order by date on two ngFor in Angular

html

angular

sorting

ngfor