如何转换此日期时间，使其在角度材质<mat-card-subtitle>中看起来不错

Question

我有这个日期看起来像这样

2000-12-16T00：00：00

当我在此材料代码中显示它时：(这是publish_date(

<mat-card *ngFor="let book of bookItems">
  <mat-card-header >
    <mat-card-title>{{book.title | titlecase}}</mat-card-title>
    <mat-card-subtitle>{{book.description}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.author}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.genre}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.publish_date}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.price}}</mat-card-subtitle>
  </mat-card-header>
</mat-card>

如何将其转换为更人性化的东西？

日期来自一个 xml 文件，如下所示：

  <book id="B1">
    <author>Kutner, Joe</author>
    <title>Deploying with JRuby</title>
    <genre>Computer</genre>
    <price>33.00</price>
    <publish_date>2012-08-15</publish_date>
    <description>Deploying with JRuby is the missing link between enjoying JRuby and using it in the real world to build high-performance, scalable applications.</description>
  </book>

它是这样读的：(这是Publish_date(

[HttpGet]
public IActionResult GetBookItems()
{
    List<BookItem> BookItems = new List<BookItem>();
    XDocument doc = _db.GetXmlDb();
    List<BookItem> bookitems = doc.Descendants("book").Select(x => new BookItem()
    {
        Id = (string)x.Attribute("id"),
        Author = (string)x.Element("author"),
        Title = (string)x.Element("title"),
        Genre = (string)x.Element("genre"),
        Price = (decimal)x.Element("price"),
        Publish_date = (DateTime)x.Element("publish_date"),
        Description = (string)x.Element("description")
    }).ToList();
    return Ok(bookitems);
}

这基本上是来自 Angular 应用程序的 Crud 调用，上面的代码是 ASP.NET Controller

当我在 Angular 应用程序中收到bookItem时，我怎样才能让它变得更好。这是 Angular 应用书

export interface BookItem
{
  id: string;
  author: string;
  title: string;
  genre: string;
  price: string;
  publish_date: string;
  description: string;
}

Answer 1

您可以使用 Angular 的 DatePipes 将该日期值转换为所需的日期字符串。

但首先，您应该通过执行类似操作将其转换为 Date 对象：

new Date('2000-12-16T00:00:00');

然后，在需要使用DatePipe的<mat-card-subtitle>上，您可以使用预定义的格式

<mat-card-subtitle>{{ book.publish_date | date: long }}</mat-card-subtitle>

或者为管道提供您自己的自定义格式。

<mat-card-subtitle>{{book.publish_date | date: 'dd MMMM yyyy' }}</mat-card-subtitle>