在angular组织者应用程序中选择即将到来的事件

Question

我正在用angular.Here创建一个组织者应用程序，我想通过显示它来突出显示下一个事件，如果我添加了‘separately.What’方法来获得这个输出。

//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>

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

Answer 1

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

对于示例:今天

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

演示

​

var now = Date.now();
var ONE_DAY_IN_MS = 86400000;
function randomDate() {
  return new Date(now + (5 * ONE_DAY_IN_MS - Math.round(Math.random() * 10 * ONE_DAY_IN_MS)));
}
var data = [
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()},
  {Date: randomDate()}
];

console.log("Entries:");
data.forEach(function(entry) {
  console.log(entry.Date.toISOString());
});

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

console.log("today", today.toISOString());
console.log("closest", closest.Date.toISOString());

​