angular - Hur man visar objekt beroende på tid och datum

Så jag arbetar på en applikation som tillåter skapandet av evenemang. Viss evenemangsinformation såsom 'Plats' och 'Koordinerat' ska visas beroende på vilket datum användaren säger att de vill att 'avslöjandedatumet' ska vara och efter detta datum. För närvarande visas de endast på 'avslöjandedatumet' och inte efter det datumet, men det behöver visas på 'avslöjandedatumet' och efter avslöjandedatumet. Jag har gjort en funktion för att kolla dagens datum och den extra evenemangsinformationen visas om 'dagens datum == avslöjandedatum'. Jag har bifogat en bild på hur det ser ut för närvarande och hur det ska se ut, och jag har bifogat en annan med koden, eftersom det skulle bli för mycket kod om jag klistrade in det här.

p.s. jag är ganska ny på Angular så jag är inte säker på om det här är det bästa sättet att göra det på, låt mig veta om det finns något jag gör helt fel. Jag använder en .NET Core-applikation som backend-API dit informationen som användaren anger skickas. Om det inte kan göras i frontend Angular-applikationen, finns det något sätt att göra det i backend-applikationen (för att specificera ett startdatum för visning och ett slutdatum för visning (men slutdatumet är alltid 'idag'))

frontend-kod:

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

TypeScript-kod (funktion för att få dagens datum):

todaysDate: any;

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

}

Denna bild visar hur det ser ut just nu och hur det bör se ut/Denna bild har koden & några fler uppgifter i sig

[REDIGERA]

Så jag har gjort några ändringar, så om datumet är större än eller lika med avslöjandedatumet, kommer det att visa informationen, men istället för att visa informationen för bara det evenemanget, avslöjar det informationen för alla evenemang i arrayen.

Typescript :

  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>

Här är 2 fler bilder, på koden och på före och efter att funktionen/metoden körs för att visa informationen baserat på datumet

Uppdaterad kod med den nya metoden/Vad som händer i applikationen nu

Svar #1

Du kan inte använda showInfo i det här fallet, eftersom det är en global variabel, och du vill ha en specifik variabel för varje händelse (om jag förstår rätt)

Vad du bör göra är, istället för att använda showInfo, ta emot händelsen från en parameter i funktionen och sätt en attribut till händelsen:

Exempel :

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

I HTML:en använder du i ngIf:

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

TIPS: Du behöver inte skriva === true

Svar #2

Jag tror att det beror på revealDate == todaysDate. Endast detta datum matchar. Du kan jämföra datum (ta en titt).

Så skriv bara en metod som returnerar false om datumet är "större" än idag. Använd sedan metoden i *ngIf.