Как преобразовать этот DateTime, чтобы он хорошо выглядел в Angular Material <mat-card-subtitle>

Question

У меня есть эта дата, которая выглядит следующим образом

2000-12-16T00: 00: 00

, когда я показываю ее в этом коде материала: (этоs 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);
}

Это в основном вызов Crud из приложения Angular, а приведенный выше код ASP.NET Controller

Как я могу, когда я получаю bookItem в приложении Angular, сделать его лучше.Это книга приложение 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>, который требует использования DatePipe,Вы можете использовать предопределенные форматы

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

или предоставить каналу свой собственный пользовательский формат .

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