根据 angular 中的 if else 显示特定数组值

Question

我有一个单独的打字稿，用于事件的数组值和事件详细信息。我想用即将发生的事件和过去的事件对它们进行分类。我已经有一个代码来确定一个事件是否是过去的事件。我是 angular 的新手，我想知道我该怎么做。

 isPastEvent(){
    let datestring = this.eventList[this.index].date;
    let dateObj = new Date(datestring);
    let currentDateObj = new Date();
    if(currentDateObj > dateObj){
      return true;
    }else{
      return false;
    }
  }

这是 html 代码：

    <div class="event-section">   
    <div class="row d-flex my-2">
        <div class="col d-flex justify-content-evenly py-3 px-5">
            <div class="card-group justify-content-evenly">
                <div *ngFor="let event of eventList">
                    <a [routerLink]="event.eventDetailsLink">
                        <div class="card border rounded shadow thumbnail"><img class="card-img-top w-100 d-block thumbnail-img" [src]="event.eventThumbnail" />
                            <div class="card-body">
                                <h6 class="card-title">{{ event.eventShortName }}</h6>
                                <div class="row g-0">
                                    <div class="col-3 text-center">
                                        <span class = "month">{{ getMonth(event.date) }}</span>
                                        <br>
                                        <span class ="date"><strong>{{ getDate(event.date) }}</strong></span>
                                        <br>
                                        <span class = "year">{{ getYear(event.date) }}</span>
                                        
                                    </div>
                                    <div class="col">
                                        <h6 style="font-size: 14px;">{{ event.shortDesc }}</h6>
                                        <p style="font-size: 10px;">{{ event.eventType }}</p>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </a> 
                </div>
            </div>
        </div>
    </div>
   </div>

这是数组文件：

export const events = [
{
    eventShortName: 'IALC: How the Construction Industry Adapts to New Technologies?',
    shortDesc: 'How Is Blockchain Driving Digital Transformation',
    eventType: 'Webinar',
    eventDetailsLink: ['/event-details', 'How-the-Construction-Industry-Adapts'],
    paramLink: 'How-the-Construction-Industry-Adapts',
    title: 'Industry Academe Linkage for Construction: How the Construction Industry Adapts to New Technologies?',
    desc: 'This webinar will feature a panel discussion that revolves around the different technologies used in the construction industry in the Philippines and how CIORS could potentially be one of the new technologies to be used as a staple in the industry and academe.',
    goal: 'The aim is to share knowledge with fellow members of the construction industry and construction academe on the various technologies used in the industry and how CIORS could play a role in it.',
    date: '08/25/2021',
    time:{
        startTime: '11:30 AM',
        endTime: '01:30 PM'
    },
    eventThumbnail: '../../../../assets/img/event1.png',
    eventCover: '../../../../assets/img/event1.png',
    registerLink: '#'
},

Answer 1

如果您想创建 2 个事件列表，请使用过滤器。如果您想标记过去的事件，那么您可以使用 *ngIf.

对于 *ngIf 选项。

在组件中创建一个变量来进行比较，日期采用易于比较的格式：

export class AppComponent {
  currentDate = new Date();

在html中添加一个class，或者打印一些文字

  <button *ngIf="item.event > currentDate" class="btn btn-success btn-block" (click)="pdfCertificateFromPageIframe()">Certificate</button>

如果您想创建 2 个列表，请使用过滤器。为旧事件定义一个数组，为新事件定义一个数组，或直接打印。从另一个例子，定义变量：

 futureEvents: SingleSeries = [{name: 'init', value: 0}];

然后运行一个过滤器。我发现这个模式有效：

events.filter(event => item.date > current_date).map(item => {
  this.futureEvents.push($item);
}

您可以将任何类型推送到与该类型匹配的集合中。最好定义一个与您的对象类型匹配的接口。然后根据它定义数组。例如对于一个简单的 2 属性数组

futureEvents: SingleSeries = [{name: 'init', value: 0}];

然后我们可以将具有名称和值属性的对象推送到它上面。

this.futureEvents.push({name: 'init', value: 0})

根据 angular 中的 if else 显示特定数组值

Display specific array values based from if else in angular

html

css

angular

angularjs

typescript