时间戳

首页 > 解决方案 > 如何在 Angular 应用程序的 html 块中查看脚本函数值？

javascript - 如何在 Angular 应用程序的 html 块中查看脚本函数值？

问题描述

我想在脚本的 html 块中显示“timeStops”值。

“timeStops”作为数组输出，我想在 html 块中显示这个数组值。

timeStops 的输出：

[“21:00”、“21:30”、“22:00”、“22:30”、“23:00”、“23:30”、“00:00”、“00:30”、“ 01:00”、“01:30”、“02:00”、“02:30”、“03:00”、“03:30”、“04:00”、“04:30”]

我的代码：

<script>
  function getTimeStops(start, end) {
      var startTime = moment(start, 'HH:mm');
      var endTime = moment(end, 'HH:mm');

      if (endTime.isBefore(startTime)) {
        endTime.add(1, 'day');
      }

      var timeStops = [];

      while (startTime <= endTime) {
        timeStops.push(new moment(startTime).format('HH:mm'));
        startTime.add(15, 'minutes');
      }
      return timeStops;
    }

    var timeStops = getTimeStops('11:00', '02:00');
    console.log('timeStops ', timeStops);
    timeStops = getTimeStops('11:00', '23:59'); //Want to show this timeStops in html block
    console.log('timeStops ', timeStops);
</script>


<div>
  <p>I want to show "timeStops" value here from above script</p>
</div>

标签： javascripthtmlangularjsangular

解决方案

请更新app.component.ts喜欢

import { Component } from '@angular/core';
import * as moment from "moment";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  getTimeStops(start: any, end: any) {
    var startTime = moment(start, 'HH:mm');
    var endTime = moment(end, 'HH:mm');

    if (endTime.isBefore(startTime)) {
      endTime.add(1, 'day');
    }

    var timeStops = [];

    while (startTime <= endTime) {
      timeStops.push(moment(startTime).format('HH:mm'));
      startTime.add(15, 'minutes');
    }
    return timeStops;
  }
  timeStops = this.getTimeStops('11:00', '02:00')
}

而你在你的添加这一行app.component.html

*ngFor循环将单独显示值

<div>{{timeStops | json}}</div>

<ul>
    <li *ngFor="let time of timeStops; let index = index">{{ time }}</li>
</ul>

推荐阅读