代码之家 › 专栏 › 技术社区 › jieunbi

按日期排序数组(最新优先)

typescript angularjs angular javascript

0

jieunbi · 技术社区 · 4 年前

我是angular js的新手,我想按日期对我的事件数组进行排序。新的事件先发生后发生。我有一个单独的事件数组文件。

这是我的数组文件, 新闻列表。ts

export const newsList = [
{
    title:'FilPass Holds Talk on Construction new Technology',
    author: {
        name: 'Hazel Chua',
        date: 'June 3, 2021',
    },
    readTime: 7,
    innerHTML: `<img src="../../../../assets/img/Newsroom/bloger.jpg" class="img-fluid w-100 mb-3" alt="">
    <p class="para-heading">FilPass Tamperproof Tech Inc. launched on July 23 the Industry-Academe Linkage for Construction Series in pursuit of introducing its flagship project, the Construction Industry One Registry System or CIORS, to the Philippine construction industry, academe, and non-profit organizations.</p>
    <p class="para">As part of the 4-part series, FilPass will be holding a panel discussion titled, âIndustry Academe Linkage for Construction Series: How the Construction Industry Adapts to New Technologiesâ, taking place on August 18, 2021, from 10:00 A.M. to 11:30 A.M. via AirMeet and streamed live on FilPassâ Facebook page.</p>
    <img src="../../../../assets/img/Newsroom/fpp-2.png" class="img-fluid w-100 mb-3" alt="">
    <br>
    <blockquote class="blockquote"><p>The event will also serve as a mass memorandum of agreement signing for FilPassâ CIORS ambassadors, partners from the construction industry and academe, different partner merchants, and media partners.</p></blockquote>
    <p class="para">It will be graced by esteemed trailblazers of the Philippine construction industry namely Engr. Jomel Molabola of Engineering Wins PH, Engr. Ralp Rivas of @itsaralp, Civil Engr. Samuel Pacba of the Technological University of the Philippines, and Gaze Kasilag-Del Castillo, Chair and President of FilPass.</p>
    <p class="para">The event will also serve as a mass memorandum of agreement signing for FilPassâ CIORS ambassadors, partners from the construction industry and academe, different partner merchants, and media partners.</p>
    <p class="para">Adding to that, FilPass ID holders, particularly CIORS signees, will get to enjoy exciting discounts and vouchers from five and counting partner merchants to be presented on the event. Meanwhile, a raffle contest is currently happening over FilPassâ Facebook page where different cash prizes await three special winners.</p>
    <img src="../../../../assets/img/Newsroom/fp-3.jpeg" class="img-fluid w-100 mb-3" alt="">
    <p class="para">If you are a student, worker, and professional related in the field of construction, you may still register for the event by heading over to this link: <a href="https://rfr.bz/f36c40p">https://rfr.bz/f36c40p </a></p>
    <p class="para">Watch out for more virtual events FilPass has in store for you! Follow FilPass on their social media pages Facebook and Instagram to stay updated.</p>`,
    postLink: ['/news-article', 'FilPass Holds Talk on Construction new Technology'.toLowerCase().split(' ').join('-')],
    paramLink: 'FilPass Holds Talk on Construction new Technology'.toLowerCase().split(' ').join('-'),
    thumbnail: '../../../../assets/img/cropBlog4.jpg'
},

这是我的JS文件,我将在其中放置sortEvents()函数:

import { Component, OnInit } from '@angular/core';
import { newsList } from 'src/app/constants/newsList';
@Component(
{ 
   selector: 'app-all-news-page',
   templateUrl: './all-news-page.component.html',
   styleUrls: ['./all-news-page.component.scss']
})

export class AllNewsPageComponent implements OnInit {
   newsList:any;
   constructor() { }

ngOnInit(): void {
this.newsList = newsList;
}

sortDate() {
   //INSERT CODE HERE
}}

这是我的HTML文件:

   <div class="news-section">
    <div class="row d-flex my-2">
        <div class="col d-flex justify-content-evenly py-3 px-5">
            <div class="card-group justify-content-evenly">
                <div *ngFor="let news of newsList">
                    <a [routerLink]="news.postLink">
                        <div class="card border rounded shadow thumbnail"><img class="card-img-top w-100 d-block thumbnail-img" [src]="news.thumbnail" />
                            <div class="card-body">
                                <h6 class="card-title">{{ news.title }}</h6>
                                <div class="row g-0">
                                    <div class="col-auto"><img class="blogger" [src]="news.author.photo"></div>
                                    <div class="col align-self-center p-1 author-details">
                                        <h6 class="m-0 author-details__name">{{ news.author.name }}</h6>
                                        <p class="author-details__date">{{ news.author.date }} * {{ news.readTime }} min read</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a> 
                </div>
            </div>
        </div>
    </div>

0 回复 | 直到 4 年前

1

2

Reza Mahmoodi 4 年前

推翻分类函数,解析日期比较一下

this.newsList.sort((a,b)=>{
    const dt1 = Date.parse(a.author.date);
    const dt2 = Date.parse(b.author.date);

    if (dt1 < dt2) return 1;
    if (dt1 > dt2) return -1;
    return 0;
});

2

0

RGA 4 年前

你可以试试这个,

console.log(this.newsList.sort((a,b) => Date.parse(b.author.date) - Date.parse(a.author.date)));