角2：如何根據時間之間的時間顯示HTML

代碼component.ts角2：如何根據時間之間的時間顯示HTML

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); 
    }

從這個上面的代碼我在diffDays獲取時間之間的持續時間，根據持續時間現在我應該如何顯示不同的HTML ，例如，如果它是1小時時間則應該會顯示綠色的HTML，如果在2小時的持續時間應該在其他一些顏色dispaly，

請幫助我，我更新的版本來角2. 謝謝

來源

2017-05-08 Pramod Ramadand

所以，你要動態的風格？看看這個指南：https://juristr.com/blog/2016/01/learning-ng2-dynamic-styles/ –

@普拉莫德Ramadand：我的答案是正確與否？ –

可以定義CSS類然後用'[類]條件=申請「{」 CLS1 「：條件1 」CLS2「：條件2}」' –

呦你也可以啓動這個計時器是你需要的日期/時間。

請閱讀更多細節：Rxjs Timer

我也提演示的例子：

您的組件：

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; 
    } 
    } 
}

來源

2017-05-08 07:42:55

角2：如何根據時間之間的時間顯示HTML

回答

相關問題