ng增加数小时Angular

Question

有没有办法用ngFor重复数字模式？让我们看看我是否解释，我尝试的是以15分钟的间隔模拟时间，然后我想要获得的是：

00:00
00:15
00:30
00:45
01:00
.
.
.
23:00
23:15
23:30
23:45

我现在拥有的是这个，但我必须制作一个超过一百个元素的矩阵。

HTML

<mat-select placeholder="Hora inicio" formControlName="horaInicio">
  <mat-option *ngFor="let hora of horas" [value]="hora">{{ hora }} hrs.</mat-option>
</mat-select>

TS

this.horas = [
      '00:00',
      '00:15',
      '00:30',
      '00:45',
      '01:00',
      '01:15',
      '01:30',
      '01:45',
      '02:00',
      '02:15',
      '02:30',
      '02:45',
    ];

我想知道有没有办法用ngFor做这个？

Answer 1

我不知道ngFor中有任何这样的功能，但您可以轻松地在TS中重复该模式以填充ngFor的源（horas）。像这样的东西：

for (let h = 0; h < 24; h++) {
  const hh = h > 9 ? "" + h: "0" + h;
  for(let m = 0; m < 60; m += 15) {
    const mm = m > 9 ? "" + m: "0" + m;
    this.horas.push(`${hh}:${mm}`);
  }
}

Answer 2

我更喜欢将编程逻辑保留在TS中，并仅使用HTML /模板进行绑定。几天前我有类似的要求，最后我用时间创建了类似下面的内容：

const openingHour = 0;
const closingHour = 24;
const intervals = [0, 15, 30, 45];
const timings = [];

for (let hour = openingHour; hour < closingHour; hour++) {
  intervals.forEach(interval => {
    timings.push(
      moment().set({
        hours: hour,
        minutes: interval,
        seconds: 0
      }).format('HH:mm'));
  });
}
console.log(timings)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>