如何根据时间和日期显示项目

Question

所以我正在开发一个允许创建事件的应用程序，某些事件信息如 'Location' 和 'Coordinated' 应该根据用户说他们想要的日期显示'reveal date' 在此日期之后。目前，它们仅在 'reveal date' 显示，而不是在该日期之后显示，但需要在 'reveal date' 和显示日期之后显示。我已经创建了一个功能来检查今天的日期，如果 'today's date == reveal date'，则会显示额外的事件信息。我附上了一张图片，展示了它当前的样子和它应该看起来的样子，我还附上了另一张带有代码的图片，因为如果我将它粘贴到这里，代码会太多。

p.s。我对 angular 很陌生，所以我不确定这是否是最好的方法，如果我做错了什么，请告诉我。我正在使用 .net 核心应用程序作为后端 api，其中发送用户输入的信息。如果无法在前端 angular 应用程序中完成，是否可以在后端应用程序中完成（指定开始显示日期和结束显示日期（但结束显示日期始终为 'today')

前端代码：

<li class="conditional" *ngIf="event.revealDate == todaysDate">Location: {{event.location | titlecase}}</li>

打字稿代码（获取今天日期的函数）：

todaysDate: any;

revealLocation() {
const utc = new Date().toJSON().slice(0,10).replace(/-/g,'-');
console.log(utc);
this.todaysDate = utc;

}

This image shows how it currently looks and how it should look/ This image has the code & some more info in it

[编辑]

所以我做了一些更改，所以如果日期大于或等于显示日期，它将显示信息，但不是只显示该事件的信息，而是显示所有信息数组中的事件。

打字稿：

  showInfo = false;

  ifDateisAfter(revealDate) {
this.revealLocation();
// this.revealLoction just figures out todaysDate
if (revealDate === this.todaysDate) {
  this.showInfo = true;
} if (revealDate >= this.todaysDate) {
  this.showInfo = true;
} else {
  this.showInfo = false;
}

}

Angular:

<li class="conditional" *ngIf="showInfo == true">Location: {{event.location | titlecase}}</li>

<button class="btn btn-success" (click)="ifDateisAfter(event.revealDate)">Check Event Info</button>

这里还有 2 张图片，代码和函数/方法前后的图片运行根据日期显示信息

Updated Code with the new method/ Whats happening in the application now

Answer 1

我认为是因为revealDate == todaysDate。只有这个日期匹配。您可以比较日期 (take a look).

所以只需编写一个方法，如果日期比今天"bigger" returns false。然后使用*ngIf.

中的方法

Answer 2

在这种情况下你不能使用 showInfo，因为它是一个全局变量，你希望每个事件都有特定的变量（如果我理解正确的话）

你应该做的是，而不是使用 showInfo，从函数中的参数接收事件并为事件设置属性：

示例：

ifDateIsAfter(event) {
  if (event.revealDate === this.todaysDate {
    event.showInfo = true;
  }
  ...
    event.showInfo = false;
  ...
}

在 HTML 你在 ngIf 中使用：

<li class="conditional" *ngIf="event.showInfo">Location: {{event.location | titlecase}}</li>

提示：您不需要输入 === true

如何根据时间和日期显示项目

How to show item depending on time & date

typescript

angular-ng-if

.net-core

angular