角度2:如何根据时间之间的持续时间显示html

Question

>code component.ts

  getduration(Calmodel) {
        console.log(Calmodel.DateFrom);
        this.DateFrom = new Date(Calmodel.DateFrom);
        this.DateTo = new Date(Calmodel.DateTo);
        var timeDiff = Math.abs(this.DateTo.getTime() - this.DateFrom.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        // alert(diffDays);
        console.log(diffDays);
    }

从上面的代码中，我正在获得不同天数中时间之间的持续时间，现在我应该如何根据持续时间显示不同的 html，例如，如果它是 1 小时的持续时间，那么应该显示绿色的 html，如果是 2 小时的持续时间应该以其他颜色显示，

请帮助我，我是角度 2 的新手。谢谢

Answer 1

您也可以启动此计时器是您需要的日期/时间。

请阅读更多详细信息： Rxjs 计时器

我还提到了演示示例：

您的组件：

import { Component } from '@angular/core';
import {Observable} from 'rxjs/Rx';
@Component({
  selector: 'app-root',
  template:`
    <div *ngIf="isShow"> Show Html 1</div>
    <div *ngIf="!isShow"> Show Html 2</div>
  `
})
export class AppComponent {
  private timer;
  private isShow:boolean=false;
  ngOnInit() {
    // First argument is how to start timer AND second is what time interval
    this.timer = Observable.timer(5000,5000); // I have set time duration is 5 second. set your time duration.
    this.timer.subscribe(t => this.displayThis(t));
  }
  displayThis(t){
    console.log(t);
    if(this.isShow){
      this.isShow = false;
    }else{
      this.isShow = true;
    }
  }
}