如何在 Angular 模板中显示日期和时间并保持更新？

Question

我需要在我的角度模板中显示日期和时间，并保持更新，所以当时间更改以显示更改的时间时， 应用程序应该如下 所示：

这是我的 .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;
  }

}

那么如何显示日期和时间呢？并在系统日期和时间更改时保持更新？

原文由 billy_56 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要做的就是在构造函数上使用 setInterval

   date:Date;
  constructor(){
    setInterval(() => {
      this.date = new Date()
    }, 1000)
  }

并使用日期管道格式化日期和时间

{{date   | date: "MM-dd-yyyy"}}
{{date   | date: "HH:mm:ss"}}

演示

原文由 Sachila Ranawaka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

例如，您应该为日期分配一个变量并每 0.1 秒更新一次

public today = Date.now();

 setInterval(() => {
      this.today = Date.now();
    }, 100);

如果你想要小时和分钟，你可以像这样在你的 html 中显示它：

 {{today | date:'HH:mm' }}

查看 https://angular.io/api/common/DatePipe 了解其他日期格式

原文由 Artory 发布，翻译遵循 CC BY-SA 4.0 许可协议