javascript - 如何在 Angular 模板中显示日期和时间并保持更新?
问题描述
我需要在我的角度模板中显示日期和时间,并保持更新,所以当时间更改为显示更改的时间时,应用程序应该如下所示:
这是我的 .html 模板代码:
<div class="top-right pull-right">
<button type="button" class="btn xbutton-rectangle" (click)="logOut()">
<div class="icon-user pull-left">
<i class="fas fa-user fa-fw"></i>
<span class="button-text">{{employee.FullName}}</span>
</div>
<div class="time-date pull-right">
<p class="button-time">08:55</p>
<p class="button-date">22.06.2018</p>
</div>
</button>
</div>
我的.ts
文件:
@Component({
selector: 'main-screen',
templateUrl: './main-screen.component.html',
styleUrls: ['./main-screen.component.css']
})
export class MainScreenComponent implements OnInit {
constructor() {
}
ngOnInit() {
//.. some methods
}
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
logOut() {
this._globals.isAuthenticated = false;
this._globals.loggedInUser = null;
this._globals.token = null;
}
}
那么如何显示日期和时间呢?并在系统日期和时间更改时保持更新?
解决方案
您需要做的就是在构造函数上使用 setInterval
date:Date;
constructor(){
setInterval(() => {
this.date = new Date()
}, 1000)
}
并使用日期管道格式化日期和时间
{{date | date: "mm-dd-yyyy"}}
{{date | date: "HH:mm:ss"}}
推荐阅读
- c++ - 在 C++ 代码块中创建休息客户端?
- vba - 如何在宏生成器 Microsoft Access 中使用两个条件打开表单
- tensorflow - tfrecords 的稀疏数据集
- android - Flutter:生成发布 SHA1 指纹
- swift - Swift 将“字符”转换为“Unicode.Scalar”
- qt - PyQt4(python 2.7):QSqlQuery 无法提取值
- java - 如何在 vaadin 中创建带有复选框的网格(矩阵 4xn)?
- ios - 在 Flutter iOS 平台特定代码中使用 Cocoapods 库
- javascript - 无法在可编辑的引导程序中做大写
- slack - 我可以通过 Slack 发送需要确认的公告吗?