代码之家 › 专栏 › 技术社区 › user7705439

Angular2每秒更新我的时钟

typescript angular

1

user7705439 · 技术社区 · 8 年前

我正在做一些 Angular2 我需要更新我的 clock 每秒钟。我只是不知道怎样才能 时钟 正如它现在所工作的那样,每秒钟都要更新一次。

这是我的组件。TS文件:

         import { Component } from '@angular/core';
         import { DatePipe } from '@angular/common';

         @Component({
            selector: 'page-header',
            templateUrl: './pageheader.component.html',
            styleUrls: ['./pageheader.component.css']
         })

         export class PageHeaderComponent {

              Housestyle = 'Dit is de huisstyle'

              Clock = Date.now();
         }

这是我的HTML:

       <div id="container">
            <div id="left">{{Housestyle}}</div>
            <div id="right">{{Clock | date:'HH:mm'}}</div>
            <div id="center"></div>
       </div>

2 回复 | 直到 8 年前

1

2

Efe 8 年前

     import { Component } from '@angular/core';
     import { DatePipe } from '@angular/common';

     @Component({
        selector: 'page-header',
        templateUrl: './pageheader.component.html',
        styleUrls: ['./pageheader.component.css']
     })

     export class PageHeaderComponent {

          Housestyle = 'Dit is de huisstyle'

          Clock = Date.now();

          public ngOnInit() {
            setInterval(() => {
              this.Clock = Date.now();
            }, 1000);
          }
     }

并添加 seconds 在模板中的过滤器中

<div id="right">{{Clock | date:'HH:mm:ss'}}</div>

2

Lex 8 年前

使用间隔。

import {Observable} from 'rxjs/Rx';

Observable.interval(1000).subscribe(x => {
    Clock = Date.now();
});