angular - 根据一天中的时间渲染动态文本 - Angular 7

Question

我想根据一天中的时间在模板中显示不同的消息。在这个特定的应用程序中，我想指示美国证券交易所的盘前、公开市场和售后市场。

目前，我正在显示当前时间。

这是我在模板中使用的内容。

<div class="score clock">
     <span class="score-title">Current Time</span>
     <span class="score-stat time">{{ time | date: 'hh:mm:ss' }}</span>
     <span class="score-stat-post">{{ time | date: 'M.d.yy' }}</span>
</div>

这是我的组件文件中的内容。

export class ScoreCardsComponent implements OnInit{
  score$: Observable<any[]>;
  time = new Date();

  constructor(private updatesService: LiveUpdatesService) {
    this.score$ = this.updatesService.getScore();
  }

  ngOnInit() {
      setInterval(() => {
        this.time = new Date();
      }, 1000);
  }

}

我想让 .score-title 元素是动态的。例如，上午 9-9:30 将显示“售前”，上午 9:30-下午 4:00 将显示“开放”，下午 4:00-6:00 将显示“售后”，剩余时间将显示“关闭”。

我对 Angular 非常陌生，因此任何有关这方面的指导都会很有帮助!

Answer 1

这种方法怎么样？如果确实必须实时发生，请使用该函数在间隔中设置一个字符串。

getStatus() {
    const hour = new Date().getHours();
    const minutes = new Date().getMinutes();
    const total = hour * 60 + minutes;

    if (hour >= 9 && total < (9 * 60 + 30)) {
        return 'Premarket';
    } else if (total >= (9 * 60 + 30) && hour < 16) {
        return 'Open';
    } else if (hour >= 16 && hour < 18) {
        return 'Aftermarket';
    } else {
        return 'Closed';
    }
}