Блог

Есть ли какой-либо способ повторить числовой шаблон с помощью 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?

Я не знаю ни о какой подобной функции в ngFor, но вы можете легко повторить шаблон в TS, чтобы заполнить свой исходный код (horas) для ngFor. Что-то вроде этого:

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

Я предпочитаю сохранять логику программирования в TS и использовать HTML / Template только для привязки. У меня было аналогичное требование несколько дней назад, и в итоге я создал что-то вроде приведенного ниже, используя moment:

 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>