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

Question

所以我正在开发一个允许创建事件的应用程序，应根据用户说他们希望“显示日期”的日期显示某些事件信息，例如“位置”和“协调”在此日期之后。目前，它们仅在“展示日期”而不是在该日期之后显示，但需要在“展示日期”和展示日期之后显示。我已经创建了一个检查今天日期的功能，如果“今天的日期 == 显示日期”，则会显示额外的事件信息。我附上了一张关于它当前的外观和它的外观的图片，我还附上了另一张带有代码的图片，因为如果我将它粘贴到这里会代码太多。

附言我对角度很陌生，所以我不确定这是否是最好的方法，如果我做错了什么，请告诉我。我正在使用 .net 核心应用程序作为发送用户输入信息的后端 api。如果不能在前端 Angular 应用程序中完成，是否可以在后端应用程序中完成（指定开始显示日期和结束显示日期（但结束显示日期始终为“今天”）

前端代码：

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

打字稿代码（获取todaysDate的函数）：

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;
}

}

角度：

<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

在这种情况下您不能使用 showInfo，因为它是一个全局变量，并且您希望每个事件的具体变量（如果我理解正确的话）

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

例子：

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

在你在 ngIf 中使用的 HTML 中：

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

提示：您无需输入=== true

Answer 2

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

所以只需编写一个方法，如果日期比今天“大”，则返回 false。然后使用*ngIf中的方法。