Question

因此，我正在开发一个允许创建事件的应用程序，应根据用户表示希望“公开日期”的日期显示某些事件信息，例如“位置”和“协调”在此日期之后。当前，它们仅在“显示日期”显示，而不在该日期之后显示，但需要在“显示日期”和显示日期之后显示。我已经创建了一个检查今天日期的功能，如果“今天的日期==显示日期”，则会显示额外的事件信息。我已经附加了一张有关当前外观以及应该如何显示的图像，并在代码中附加了另一个图像，因为如果将其粘贴到此处，将会太多代码。

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

前端代码：

<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中的方法。

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

2 个答案: