显示时的条件ngIf

时间:2018-07-17 12:03:53

标签: angular

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

此刻,我正在显示所有日期,如下所示:

<div class="user" *ngFor="let user of users">
        <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

 shouldDisplayDate(date: Date) {
const arrayDate = this.users.map(a => a.date);
const set = new Set()
const filtreArrayDate = arrayDate.filter((a) => {
  const d = new Date(a).setHours(0, 0, 0)
  if (set.has(d)) {
    return false
  }
  set.add(d);
  return true;
})

}

是否可以执行ngIf,所以我只能显示filtreArrayDate中的值并正确调用我的函数,所以我只能显示filtredArrayDate中的值?

谢谢。

StackBlitz:https://stackblitz.com/edit/stacktest

0 个答案:

没有答案