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');

然后，在需要使用<mat-card-subtitle>的{{1}}上，您可以使用pre-defined formats

DatePipe

或为管道提供您自己的custom format。

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

如何转换此DateTime，使其在Angular Material <mat-card-subtitle>中看起来不错

1 个答案: