Question

here's an image。我正在使用管道计算给定日期和日期之间的时差。我的问题是，我希望它像时钟滴答一样刷新。有什么建议或其他解决方案吗？

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'waitingTime'
})
export class WaitingTimePipe implements PipeTransform {

  transform(value: any): any {
    var diff = new Date().getTime() - new Date(value).getTime()
    var msec = diff;
    var hh = Math.floor(msec / 1000 / 60 / 60);
    msec -= hh * 1000 * 60 * 60;
    var mm = Math.floor(msec / 1000 / 60);
    msec -= mm * 1000 * 60;
    var ss = Math.floor(msec / 1000);
    msec -= ss * 1000;
    return hh + "hrs, " + mm + "mins, " + ss +"secs, ";
  }

}

<table>
        <tr>
            <th style="width:15px;">#</th>
            <th>Nickname</th>
            <th>Waiting Time</th>
            <th>action</th>
        </tr>
    
 
        <tr *ngFor="let d of data; let i = index">
            <td>{{index+ 1}}</td>
            <td>{{d.Nickname}}</td>
            <td >{{d.StartDateTime | waitingTime}}</td>
            <td>
                <button   icon="pi pi-check" 
                            styleClass="ui-button-success"></button>
                <button   icon="pi pi-replay" 
                            styleClass="ui-button-warning"></button>
            </td>
        </tr>
</table>

Answer 1

您的代码不会以某个（固定的）时间间隔执行，因为仅在检测到某些区域更改时才调用管道。我将使用rxjs timer并更新列表中任何d对象内的附件成员

Answer 2

将此代码放入您的component.ts

WebDriver

请注意，selenium-api是不是日期为appium的字符串，因此您的import { interval } from 'rxjs'; const secondsCounter = interval(1000); secondsCounter.subscribe(n => { this.refresh() }); refresh(){ for(var i=0; i<data.length;i++){ data[i].StartDateTime2 = transform(data[i].StartDateTime); } } transform(value: any): any { var diff = new Date().getTime() - new Date(value).getTime() var msec = diff; var hh = Math.floor(msec / 1000 / 60 / 60); msec -= hh * 1000 * 60 * 60; var mm = Math.floor(msec / 1000 / 60); msec -= mm * 1000 * 60; var ss = Math.floor(msec / 1000); msec -= ss * 1000; return hh + "hrs, " + mm + "mins, " + ss +"secs, "; }模板应为StartDateTime2

Answer 3

更好的选择是创建一个单独的组件，该组件使用rxjs运算符计算显示值并发出自定义事件。这些事件将帮助您跟踪-计时器已过期，已启动等等（如果需要更新您的操作列，则很有用）。该组件应接受种子时间作为输入。因此，总体而言，它应该具有以下内容

@Input seedTime:number（应接受种子值，计数器应该开始）
@Output waitingEvent:EventEmitter<>（应在逻辑上发出事件点，以便父组件可以执行某些操作）

加上这种方法，您还可以控制是否需要显式停止/暂停单个行的计时器。

custom-comp.html

{{formattedTime}}

custom.comp.ts

//... Excluded component definition for brevity

formattedTime = '';

@Input
seedTime:number;

@Output
waitingEvent = new :EventEmitter<'STARTED'|'STOPED'>();

interval$ = interval(1000);

const timer$ = this.interval$.pipe(
takeWhile(v < this.seedTime)
);


ngOnInit() {
this.timer$.subscribe(v=>{
this.formattedTime = this.callYourFormatFunction(this.seedTime - v);
});
}

请注意，您仍然可以增强此设计并将observable传递给您的管道类，这样就不必显式调用callYourFormatFunction。

我希望表上的数据像时钟一样滴答地刷新，有什么建议吗？

3 个答案: