Question

我正在处理Angular2中的某些内容，我需要每秒更新一次clock。我只是不知道如何让clock现在正常工作，每秒更新一次。

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

Answer 1

     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>

Answer 2

使用间隔。

import {Observable} from 'rxjs/Rx';

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

Angular2每秒更新一次我的时钟

2 个答案: