Блог

У меня есть что-то вроде приведенного ниже, и мне нужно отображать даты постепенно

 <ul>
  <li *ngFor="let item of items">
      <h2>
       {{item.name}}
      </h2>
      <p >
        {{item.description}}
      </p>
      <time>{{date | date:'dd/MM/yyyy'}}</time>
  </li>
</ul>  

даты должны отображаться так, как для первого элемента отображается сегодняшняя дата, а затем завтрашняя и так далее.
Если есть способ, которым это можно сделать только с помощью шаблона html, тогда это лучше. Или просто помогите с лучшим способом сделать это.

Я не думаю, что есть способ сделать это только с помощью канала даты, его основное использование — преобразование текущей даты в другое отображение. Не добавляется / не удаляется. Что вы могли бы сделать, так это создать свой собственный канал даты с параметром смещения

Решение 1

Создание нового канала и использование библиотеки moment

 import {Pipe, PipeTransform} from '@angular/core';
import * as moment from 'moment';

@Pipe({name: 'customDate'})
export class CustomDatePipe implements PipeTransform {
  transform(date, format = 'dd/MM/yyyy', dayOffset = 0, monthOffset = 0, yearOffset = 0) {
    return moment(new Date(date)).add(dayOffset, 'days')
                                 .add(monthOffset, 'months')
                                 .add(yearOffset, 'years')
                                 .format(format);
  }
}
  

а затем ссылайтесь на нее в html следующим образом

 <ul>
  <li *ngFor="let item of items; let i = index">
      <span>{{date | customDate: 'dd/MM/yyyy': i}}</span>
  </li>
</ul>
  

Решение 2

Или вы можете использовать ванильную дату javascript вместе с пользовательским каналом

 import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'customDate'})
export class CustomDatePipe implements PipeTransform {
  transform(date, format = 'dd/MM/yyyy', dayOffset = 0) {
    return new Date(date).addDays(dayOffset);
  }
}
  

и ссылайтесь на это следующим образом

 <ul>
  <li *ngFor="let item of items; let i = index">
      <span>{{date | customDate: i | date: 'dd/MM/yyyy'}}</span>
  </li>
</ul>