如何解决将 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>
但不幸的是,我无法显示这些数据。
你能告诉我正确的方向吗?提前致谢
解决方法
从您描述问题的方式来看,您似乎只对日期大于特定日期的项目感兴趣。我会这样处理
方法一
- 生成新属性
constructor() { }
itemList = [...];
currentDate = new Date();
newItemList = this.itemList.filter(({ startDate }) => new Date(startDate) > this.currentDate)
ngOnInit(): void {
}
- 更改html
<div *ngFor="let item of newItemList">
{{item.text}}
</div>
方法 2
- 创建新属性
isGreaterThanToday
constructor() { }
currentDate = new Date();
itemList = [...].map(x => ({
...x,isGreaterThanToday: new Date(x.startDate) > this.currentDate
}));
ngOnInit(): void {
}
- 在 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>
响应式编程
通过响应式编程,我们可以修改上面的方法 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>
,
如果 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)"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。