将 Angular >11 中的日期与 *ngIf 进行比较

问题描述

我想仅在某些项目的日期比另一个日期新时才显示它们。所以，在 component.ts 我有：

constructor() { }
  currentDate = new Date();
  ngOnInit(): void {
  }

虽然我想循环 component.html 列表中的相关项目：

<div *ngFor="let item of itemList">
  <div *ngIf="(item.startDate | date:'yyyy-MM-dd' > currentDate | date:'yyyy-MM-dd')">
    {{item.text}}
  </div>
</div>

但不幸的是，我无法显示这些数据。

你能告诉我正确的方向吗？提前致谢

解决方法

从您描述问题的方式来看，您似乎只对日期大于特定日期的项目感兴趣。我会这样处理

方法一

1. 生成新属性

  constructor() { }
  itemList = [...];
  currentDate = new Date();
  newItemList = this.itemList.filter(({ startDate }) => new Date(startDate) > this.currentDate)
  ngOnInit(): void {
  
  }

2. 更改html

<div *ngFor="let item of newItemList">
  {{item.text}}
</div>

方法 2

1. 创建新属性 isGreaterThanToday

  constructor() { }
  currentDate = new Date();
  itemList = [...].map(x => ({
    ...x,isGreaterThanToday:  new Date(x.startDate) > this.currentDate
   }));
  
  ngOnInit(): void {
  
  }

2. 在 html 中

<div *ngFor="let item of itemList">
  <div *ngIf="item.isGreaterThanToday">
    {{item.text}}
  </div>
</div>

实现项目切换

实现这一点的最简单方法是让另一个属性说 showAll 可用于切换，例如

<label>Show All <input type="checkbox" [(ngModel)]="showAll"/></label>
<div *ngFor="let item of itemList">
  <div *ngIf="item.isGreaterThanToday || showAll">
    {{item.text}}
  </div>
</div>

See this demo

响应式编程

通过响应式编程，我们可以修改上面的方法 1。这将是用于提高性能的最佳方法，因为它可以更轻松地实现 ChangeDetectionStrategy.OnPush

在您的 TS 文件中，您需要将变量转换为 Observables 并对更改做出反应

  constructor() {}
  showAllSubject$ = new BehaviorSubject(false);
  itemList = [
    { startDate: "2000-01-01",text: "Some past event 3" } ...
  ];
  itemList$ = of(this.itemList);
  itemListFiltered$ = combineLatest([
    this.itemList$,this.showAllSubject$
  ]).pipe(
    map(([itemList,showAll]) =>
      showAll
        ? itemList
        : itemList.filter(
            ({ startDate }) => new Date(startDate) > this.currentDate
          )
    )
  );
  currentDate = new Date();
  showAll = false;
  ngOnInit(): void {}

在你的 html 中

<label
  >Show All
  <input
    type="checkbox"
    [(ngModel)]="showAll"
    (ngModelChange)="showAllSubject$.next(showAll)"
/></label>

<div *ngFor="let item of itemListFiltered$ | async">
  {{item.text}}
</div>

Below is a demo

,

如果 startDate 是一个 Date 对象，我会做这样的事情。在组件中创建函数

   function isDateStartingAfterToday(startDate) {
      return startDate.getFullYear() > this.currentDate.getFullYear() &&
        startDate.getDate() > this.currentDate.getDate() &&
        startDate.getMonth() > this.currentDate.getMonth();
    }

并在 ngIf 中执行这个组件

*ngIf="isDateStartingAfterToday(item.startDate)"