*ngIf速度太快，无法检测订阅结果

Question

我正在尝试在我的页面设置倒计时。我给出一个随机的未来日期，进行计算，然后在页面上显示剩余时间。到目前为止，*ngIf正在快速检查来自observable的值。也尝试过异步管道，但没有运气。如有任何意见，不胜感激!

<div *ngIf="remainingTime" class="promo-progress-bar__info__countdown">
<div *ngIf="remainingTime.minutes">{{remainingTime.minutes + ' / '}} {{'days' | translate}}</div>
<div *ngIf="remainingTime.hours">{{remainingTime.hours + ' / '}}{{'hours' | translate}}</div>
<div *ngIf="remainingTime.minutes">{{remainingTime.minutes + ' / '}}{{'minutes' | translate}}</div>
<div *ngIf="remainingTime.seconds">{{remainingTime.seconds}}{{'seconds' | translate}}</div>
</div>

ngOnInit(): void {
this.getRemainingTime().subscribe(item => {
this.remainingTime = item;
this.cdRef.detectChanges();
});
}
getRemainingTime(): Observable<DaysHours> {
let stopDate = dayjs('Mon May 16 2022 21:09:14 GMT+0200 (Central European Summer Time)');
this.$counter = interval(1000).pipe(
map((x) => {
const now = dayjs();
let seconds = stopDate.diff(now, 'seconds')
let days = Math.floor(seconds / (3600*24));
let hours = Math.floor(seconds % (3600*24) / 3600);
let minutes = Math.floor(seconds % 3600 / 60);
seconds = Math.floor(seconds % 60);
console.log({days, hours, minutes, seconds})
this.cdRef.detectChanges();
return {days, hours, minutes, seconds}
}));
return this.$counter;
}

Answer 1

使用async管道将解决您的问题:

<div  *ngIf="$remainingTime | async as remainingTimeData" class="promo-progress-bar__info__countdown">
<div *ngIf="remainingTimeData.minutes">{{remainingTimeData.minutes + ' / '}} {{'days' | translate}}</div>
<div *ngIf="remainingTimeData.hours">{{remainingTimeData.hours + ' / '}}{{'hours' | translate}}</div>
<div *ngIf="remainingTimeData.minutes">{{remainingTimeData.minutes + ' / '}}{{'minutes' | translate}}</div>
<div *ngIf="remainingTimeData.seconds">{{remainingTimeData.seconds}}{{'seconds' | translate}}</div>
</div>

在typescript类中添加一个行为主题:

remainingTimeSubject = new BehaviorSubject<{ days: any; hours: any; minutes: any; seconds: any }>
({ days: null, hours: null, minutes: null, seconds: null });
$remainingTime = this.remainingTimeSubject.asObservable();
newRemainingTimeSubject(val:any){
this.remainingTimeSubject.next(val);
}

构造函数(){}

你的函数将触发每个数据更改使用行为主题方法:

newRemainingTimeSubject(val: any) {
this.remainingTimeSubject.next(val);
}

你的函数将是这样的:

getRemainingTime(): Observable<DaysHours> {
let stopDate = dayjs('Mon May 16 2022 21:09:14 GMT+0200 (Central European Summer Time)');
this.$counter = interval(1000).pipe(
map((x) => {
const now = dayjs();
let seconds = stopDate.diff(now, 'seconds')
let days = Math.floor(seconds / (3600*24));
let hours = Math.floor(seconds % (3600*24) / 3600);
let minutes = Math.floor(seconds % 3600 / 60);
seconds = Math.floor(seconds % 60);
console.log({days, hours, minutes, seconds})
this.cdRef.detectChanges();
//new 
let newData = {days, hours, minutes, seconds}
this.newRemainingTimeSubject(newData)
//new 
return {days, hours, minutes, seconds}
}));
return this.$counter;
}
//dont forget to change  remainingTime to $remainingTime on your template