如何在Angular2中按日期对展示数据进行降序排序？

Got it! Let's get your active messages sorted by date in descending order (newest first). Here are two practical approaches tailored to your Angular setup:

Approach 1: Sort in the Component (Recommended for Performance) #

Sorting your data directly in the component class is the most efficient way, especially if you're dealing with larger datasets. This way, the sort operation runs once (or whenever your data updates) instead of on every change detection cycle like a pipe would.

In your component TypeScript file:

import { Component, OnInit } from '@angular/core';
// Import your service if you're fetching data from one
// import { YourMessageService } from './your-message.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  activeMessages: any[] = [];
  filter: string = '';
  message_id: number | null = null;

  // constructor(private messageService: YourMessageService) {}

  ngOnInit(): void {
    // Fetch your messages (replace with your actual data retrieval logic)
    // this.activeMessages = this.messageService.getActiveMessages();
    
    // Sort the messages by date descending
    this.sortMessagesByDateDesc();
  }

  // Call this method whenever your activeMessages data updates
  sortMessagesByDateDesc(): void {
    this.activeMessages.sort((a, b) => {
      // Convert date strings to timestamps for accurate comparison
      const timestampA = new Date(a.date).getTime();
      const timestampB = new Date(b.date).getTime();
      
      // Descending order: newer dates come first
      return timestampB - timestampA;
    });
  }

  // Your existing showMessage method
  showMessage(message: any): void {
    this.message_id = message.id;
    // Rest of your logic here
  }
}

Approach 2: Use a Custom Sort Pipe #

If you prefer to handle sorting directly in your template (great for conditional sorting or quick implementations), create a custom pipe:

Step 1: Generate the pipe #

Run this command in your terminal:

ng generate pipe sortByDate

Step 2: Implement the pipe logic #

Update sort-by-date.pipe.ts:

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

@Pipe({
  name: 'sortByDate'
})
export class SortByDatePipe implements PipeTransform {
  // Default to descending order, but allow overriding
  transform(messages: any[], order: 'asc' | 'desc' = 'desc'): any[] {
    // Return empty array if input is null/empty
    if (!messages?.length) return [];

    return [...messages].sort((a, b) => {
      const dateA = new Date(a.date).getTime();
      const dateB = new Date(b.date).getTime();
      
      return order === 'desc' ? dateB - dateA : dateA - dateB;
    });
  }
}

Step 3: Use the pipe in your template #

Add it to your *ngFor chain (after your existing messagefilter pipe):

<mat-tab label="Active"> 
  <mat-icon>search</mat-icon> 
  <input type="search" [(ngModel)]="filter" name="search" class="search" placeholder="Company"> 
  <ul> 
    <li *ngFor="let message of activeMessages | messagefilter: filter | sortByDate: 'desc'" 
        (click)="showMessage(message)" 
        [class.activeShow]="message.id == message_id"> 
      <!-- Your message content here -->
    </li> 
  </ul>
</mat-tab>

Quick Notes: #

• Ensure your date property in each message is a valid date string (e.g., ISO format YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss). If it's a non-standard format, you may need to adjust the date parsing logic.
• For dynamic data updates (e.g., new messages added), remember to re-run the sort method (Approach 1) or the pipe will automatically re-run (Approach 2).

内容的提问来源于stack exchange，提问作者Bhrungarajni