正文 

当前位置： 首页 > 源码 >

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

     2023-03-06     200

关键词：

【中文标题】在角度管理器应用程序中选择即将发生的事件【英文标题】：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());

【讨论】：

谷歌数据工作室日期范围 - 添加即将发生的事件

...0-0814:07:08【问题描述】：是否有可能根据在数据工作室中选择的>=日期的日期范围选择所有值？或者这仍然不受支持。P.S.任何其他方式来获取即将发生的事件，例如如果当前是10月8日，它将显示下一个事件（假期）？【问题讨... 查看详情

系统日志事件代码分别代表什么意思

...管理。事件查看器一般可以查看四类日志，他们分别是“应用程序”，“internetexplorer”，“安全性”和“系统”。如图[attachment=1584]对于“登陆/注销”来说我们重点关注“应用程序”和“系统”这2类，“登陆/注销”这种行为一... 查看详情

来自google日历的即将发生的事件在python中(代码片段)

...响应只有事件直到当天。有没有办法让谷歌日历中创建的即将发生的事件或未来事件？这是我在Flask中的app.route@app.route('/events',methods=['GET'])defgetEvents():eventsResult=service.events().list(calendarId='p 查看详情

怎么查看电脑日志

...器‘面板中，点击左侧的’Windows日志‘，可以看到有’应用程序、安全、setup、系统等‘可以在这里查看自己需要看的信息。1、如：我要查看系统的开关机，则点击右侧的’筛选当前日志...‘然后输入6005,6006，点击确定，则可... 查看详情

检测即将发生的文本选择

】检测即将发生的文本选择【英文标题】：Detecttextselectionabouttohappen【发布时间】：2011-12-0701:38:51【问题描述】：在iOS中，有没有办法编写在系统即将在UIWebView上显示文本选择控件时调用的代码？如果可能的话，我需要在用户想... 查看详情

tinymce 角度图像选择器语法

...：2020-11-0302:52:16【问题描述】：我有一个使用angular的ionic应用程序，我想将图像选择器放入我在页面上介绍的tinymce编辑器中。在tinymcedocs中，据我所知，它说要在html文件中使用angular指令（我还使用了来自here的ngModel）：<h1>T... 查看详情

怎么查看电脑开机记录？

...开机记录步骤如下：1、桌面选择我的电脑，右键，选择管理；2、打开计算机管理，依次选择事件查看器—windows日志—系统；3、下拉系统记录，可以看到电脑的详细开机记录，查看除自己外是否有其他的开机记录。电脑控制面... 查看详情

怎么查看自己的电脑开机记录？

...开机记录步骤如下：1、桌面选择我的电脑，右键，选择管理；2、打开计算机管理，依次选择事件查看器—windows日志—系统；3、下拉系统记录，可以看到电脑的详细开机记录，查看除自己外是否有其他的开机记录。电脑控制面... 查看详情

在角度2中传递更改事件的参数

】在角度2中传递更改事件的参数【英文标题】：passingparametersonchangeeventinangular2【发布时间】：2017-11-2413:32:33【问题描述】：我必须在选择项目时通过该选项的值。但是在我的事件发生后，传递的值始终是未定义的。我的代码如... 查看详情

惠普服务器内存故障时间怎么查

...障类型、故障位置等。另外，您还可以通过惠普服务器的管理工具来查看内存故障时间。例如，使用惠普系统管理器（HPSystemManagement）可以查看服务器硬件状态，包括内存模块的状态和故障时间等信息。总之，惠普服务器内存故... 查看详情

怎么查看电脑重启记录

...右键---管理---展开事件查看器（非时间查看器），伐里分应用程序、安全性、系统，三大类的事件记录，点击相应的项，在右侧就看到所有事件的记录。主要用于分析出错原因。问题二：如何查看自己电脑的开机记录？？？鼠标... 查看详情

怎样利用事件查看器（系统日志）查看电脑在当日中工作了几个小时？

...的同时，事件日志服务会自动启动，所有用户都可以查看应用程序日志和系统日志，但只有管理员才能访问安全日志。如何找到事件查看器？点击“开始→设置→控制面板”，点击“管理工具”。然后双击“事件查看器”。现在... 查看详情

selector选择器

...通道）的状态是否处于可读、可写。如此可以实现单线程管理多个channels,也就是可以管理多个网络链接学习Selector之前，需要先了解阻塞IO和非阻塞IO的区别。以烧水为例，出场人物：老王，普通水壶和响水壶。通过以上故事，我... 查看详情

ODBC 数据源管理器崩溃

】ODBC数据源管理器崩溃【英文标题】：ODBCDataSourceAdministratorCrashes【发布时间】：2014-07-0718:39:38【问题描述】：我的组织中有一个用户在单击“文件DSN”选项卡时遇到。过去2个月一直在发生这种情况。当我试图强制关闭程序时，... 查看详情

通过将日期与日历日期进行比较来加载即将发生的事件

】通过将日期与日历日期进行比较来加载即将发生的事件【英文标题】：loadingupcomingeventsbycomparingtheirdateswiththecalendardate【发布时间】：2014-02-0600:22:28【问题描述】：我在网上找到了以下代码，用于比较两个日期（日历的日期和... 查看详情

如何查看电脑里的系统日志

...帮助。　　查看系统日志方法:开始→设置→控制面板→管理工具中找到的“事件查看器”，　　或者在【开始】→【运行】→输入eventvwr.msc也可以直接进入“事件查看器”　　在“事件查看器”当中的系统日志中包含了windowsXP... 查看详情

winform中怎么使用eventlog控件记录事件日志

...并双击在打开的事件查看器中，展开windows日志，点击“应用程序”在日志里，可以看到我们定义的mylog源本回答被提问者采纳 查看详情

怎么查看windows错误报告

...ws的错误报告可以在事件查看器查看。1、右击计算机选择管理，打开计算机管理的界面。2、在计算机管理，依次选择事件查看器，windows日志，系统，在中间的界面就能看到系统运行时所有事件的信息，其中红色图标带有叹号的... 查看详情