Javascript 在角度管理器应用程序中选择即将发生的事件

我正在angular中创建一个organizer应用程序。在这里，我想通过单独显示来突出显示下一个事件。我应该在“即将到来”方法中添加什么来获得此输出

//component
export class EventListComponent implements OnInit {

  list: Event[];
  constructor(private service: EventService,
              private firestore: AngularFirestore,
              private toastr: ToastrService) { }

  ngOnInit(): void {
    this.service.getEvents().subscribe(actionArray => {
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...(item.payload.doc.data() as object)
        } as Event;
      });
    });
  }

  onEdit(eve: Event){
    this.service.formData = Object.assign({}, eve);
  }

  upcoming(){ }

  onDelete(id: string){
    if (confirm('Are you sure')){
      this.firestore.doc('events/' + id).delete();
      this.toastr.warning('Deleted successfully', 'Delete');
    }
  }

}

这是HTML文件。我想将此突出显示的事件放入下面代码中的第一个“”

//html
<div>
  <ul class="list-group" *ngFor="let eve of list">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <label class="mt-2">{{eve.activity}}</label>
      <label class="mt-2">{{eve.date}} / {{eve.time}}</label>
      <div class="mt-2">
       <span class="mx-2 text-success">
         <i class="fas fa-pen" (click)="onEdit(eve)" data-toggle="modal" data-target="#exampleModalCenter"></i>
       </span>
        <span class="mx-2 text-danger">
         <i class="fas fa-trash" (click)="onDelete(eve.id)"></i>
       </span>
      </div>
    </li>
  </ul>

 <ul class="list-group" *ngFor="let eve of list">
   <li class="list-group-item d-flex justify-content-between align-items-center">
     <label class="mt-2">{{eve.activity}}</label>
     <label class="mt-2">{{eve.date}} / {{eve.time}}</label>
     <div class="mt-2">
       <span class="mx-2 text-success">
         <i class="fas fa-pen" (click)="onEdit(eve)" data-toggle="modal" data-target="#exampleModalCenter"></i>
       </span>
       <span class="mx-2 text-danger">
         <i class="fas fa-trash" (click)="onDelete(eve.id)"></i>
       </span>
     </div>
   </li>
 </ul>
</div>

//html


{{eve.activity}
{{eve.date}/{{eve.time}




{{eve.activity}
{{eve.date}/{{eve.time}

---

我在这里使用firebase作为数据库。我添加了完整的代码

您可以有一种方法将事件减少到最接近日期的日期：

例如：今天

 const today = new Date();
 const closest = events.reduce((a, b) => a.Date - today < b.Date - today ? a : b);

const today=新日期（）；
常数最近=事件减少（（a，b）=>a.日期-今天

演示

var now=Date.now（）；
var一天单位=86400000；
函数randomDate（）{
返回新日期（现在+（5*一天-数学轮（Math.random（）*10*一天-数学轮））；
}
风险值数据=[
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}
];
console.log（“条目：”）；
data.forEach（函数（条目）{
console.log（entry.Date.toISOString（））；
});
const today=新日期（）；
const closest=data.reduce（（a，b）=>a.Date-todaylog（“最近的”，最近的.Date.toISOString（））您可以有一种方法将事件减少到最接近日期的日期：

例如：今天

 const today = new Date();
 const closest = events.reduce((a, b) => a.Date - today < b.Date - today ? a : b);

const today=新日期（）；
常数最近=事件减少（（a，b）=>a.日期-今天

演示


var now=Date.now（）；
var一天单位=86400000；
函数randomDate（）{
返回新日期（现在+（5*一天-数学轮（Math.random（）*10*一天-数学轮））；
}
风险值数据=[
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}，
{Date:randomDate（）}
];
console.log（“条目：”）；
data.forEach（函数（条目）{
console.log（entry.Date.toISOString（））；
});
const today=新日期（）；
const closest=data.reduce（（a，b）=>a.Date-todaylog（“最近的”，最近的.Date.toISOString（））突出显示的事件是什么意思？我想把它移到一个新的“ul”位置，但我还是不明白，我想其他人也一样。添加您的预期结果我只想根据日期从事件列表中获取下一个事件，例如，如果有两个事件发生在2020年4月25日和2020年4月28日。我需要一种方法来获取与当前日期最接近的事件。在本例中，是2020年4月25日。答案有帮助吗？突出显示的事件是什么意思？我想将其移动到新的事件“ul”我还是不明白，我想其他人也一样。添加您的预期结果我只想根据日期从事件列表中获取下一个事件，例如，如果有两个事件发生在2020年4月25日和2020年4月28日。我需要一种方法来获取与当前日期最近的事件。在本例中，是2020年4月25日。答案是否有帮助