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

Posted 2023-03-06

【中文标题】在角度管理器应用程序中选择即将发生的事件

【英文标题】：Choosing the upcoming event in a angular organizer application

【发布时间】：2020-04-17 16:41:33

【问题描述】：

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

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

【问题讨论】：

突出显示的事件是什么意思？

我想把它移到一个新的'ul'

我还是不明白，我想其他人也一样。添加您的预期结果

我只想根据日期从事件列表中获取下一个事件，例如，如果日期 25/04/2020 和 28/04/2020 有两个事件。我需要一个方法获取最接近当前日期的事件。在本例中为 25/04/2020。

答案有帮助吗

【参考方案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());