Question

我有一个div，我想在日期后附加一个ngIf条件。

此刻，我正在显示所有日期，如下所示：

<div class="user" *ngFor="let user of user">
        <div *ngIf="user.recipient === selectedUser._id && showUser(User)">
          <div *ngIf="shouldDisplayDate(user.date)">
          <div class="message-date">{{ user.date | date:'EEEE'}} {{user.date | date:'d'}}  {{ user.date | date:'MMMM'}} {{ user.date |
            date:'yyyy'}}
          </div>
          </div>

例如：

["Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)",
 "Fri Jul 13 2018 09:33:46 GMT+0200 (CEST)",
 "Fri Jul 13 2018 09:21:36 GMT+0200 (CEST)",
 "Fri Jul 13 2018 09:03:42 GMT+0200 (CEST)",
 "Fri Jul 13 2018 09:01:05 GMT+0200 (CEST)",
 "Fri Jul 13 2018 08:53:23 GMT+0200 (CEST)",
 "Fri Jul 13 2018 08:52:33 GMT+0200 (CEST)",
 "Thu Jul 12 2018 13:41:59 GMT+0200 (CEST)",
 "Thu Jul 12 2018 13:41:49 GMT+0200 (CEST)",
 "Thu Jul 12 2018 13:41:42 GMT+0200 (CEST)"]

我7月13日星期五有6次，7月12日星期四有3次，7月16日星期一有1次

我只想显示每个日期的第一个，而不是全部

"Thu Jul 12 2018 13:41:59 GMT+0200 (CEST)"
"Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)",
 "Fri Jul 13 2018 09:33:46 GMT+0200 (CEST)"

ts

messageRed(date: Date) {
    const users = this.messages.map(a => a.date);
    for (const dateString of users) {
      if (!this.datesFiltered.find(d => new Date(d).setHours(0, 0, 0) == new Date(dateString).setHours(0, 0, 0))) {
        this.datesFiltered.push(new Date(dateString))
        console.log(this.datesFiltered) // this will display the filtred data
      }
    }
  }

有没有办法在日期上执行ngIf？

Answer 1

我正在处理您想要的第一个版本：

https://angular-pyzt3g.stackblitz.io

我按唯一值（年-月-日）过滤数据，其余的过滤具有唯一年-月-日的最后日期的唯一性。

欢呼！

Answer 2

我宁愿将所有唯一的日期都推迟。要实现一种逻辑，以根据用户选择更改或组件更改的其他状态（用户状态）来过滤并获取唯一日期。像这样：

   //Clear the uniqueDate collection first
   this.uniqueDates=[];
   // Get all the filtered user dates
   const dates = users.filter(user => user.recipient === this.selectedUser._id && this.showUser(User))
                      .map(uniqueDates=> filteredUsers.date);

    const uniqueKeys: { [name: string]: any; } = {};
    // Unique dates
    dates.forEach((element) => {
       const uniquieKey = element.getDate() + element.getMonth() + element.getFullYear();
       if (!uniqueKeys[uniquieKey]) {
          uniqueKeys[uniquieKey] = element;
          this.uniqueDates.push(element);
        } 
     });
   }
 }

这将删除模板中的if条件，并使其更具可读性。

<div class="user" *ngFor="let date of uniqueDates">       
          <div class="message-date">{{ date | date:'EEEE'}} {{date | date:'d'}}  {{ date | date:'MMMM'}} {{ date |
            date:'yyyy'}}
          </div>
</div>

Answer 3

您可以在组件代码中添加以下内容：

lastDate: Date = null;

shouldDisplayDate(date: Date) : boolean {
    if (date != this.lastDate) {
        this.lastDate = date;
        return true;
    }
    return false;
}

，然后在模板中：

<div *ngIf="shouldDisplayDate(user.date)">
    <div class="user-date">{{ user.date | date:'EEEE'}} {{user.date | date:'d'}}  {{ user.date | date:'MMMM'}} {{ user.date |date:'yyyy'}}</div>
</div>

如果我理解正确的话，结果应该是您想要的。

条件ngIf日期

3 个答案: