时间戳

首页 > 解决方案 > 在角度模板中增加日期

html - 在角度模板中增加日期

问题描述

我有类似下面的内容，我需要逐步显示日期

<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 模板来完成，那就更好了。或者只是帮助最好的方法来做到这一点。

标签： htmlangulardate

解决方案

我不认为只有日期管道可以做到这一点，它的主要用途是将当前日期转换为不同的显示。不添加/删除。您可以做的事情是创建您自己的具有偏移选项的日期管道

解决方案 1

创建新管道并使用矩库

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

或者您可以使用 vanilla javascript Date 以及自定义管道

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>

推荐阅读