首页 > 解决方案 > 无法在 Angular 上显示日期管道

问题描述

我想显示一个带有 angularjs 和 firebase 的日期管道,以显示我何时创建帖子。当有帖子列表并且我看到帖子的详细信息但在我测试它时没有显示任何内容时。

这是我的创建帖子功能:

createPost() {
    const data = {
      author: this.auth.authState.displayName || this.auth.authState.email,
      authorId: this.auth.currentUserId,
      content: this.content,
      image: this.image,
      published: new Date(),
      title: this.title
    };

接下来是帖子列表html:

<section>
    <mat-card *ngFor="let post of posts | async">
        <mat-card-content routerLink="{{post.id}}">
            <img src="{{post.image}}" alt="{{post.title}}">
            <h2>{{post.title}}</h2>
            <p><small>Posted by {{post.author}} &bull; on {{post.published * 1000 | date: 'fullDate'}}</small></p>
        </mat-card-content>
        <mat-card-actions align="end" *ngIf="auth.currentUserId === post.authorId">
            <button mat-icon-button (click)="delete(post.id)">
                <mat-icon>delete</mat-icon>
            </button>
        </mat-card-actions>
    </mat-card>
</section>

并发布详细信息html:

<div [hidden]="editing">
        <mat-card>
            <img src="{{post.image}}" alt="{{post.title}}">
            <p>
            <small>Posted by {{post.author}} &bull; on {{post.published * 1000 | date: 'fullDate'}}</small>
            </p>
            <mat-card-content>
                <h2>{{post.title}}</h2>
                <p>{{post.content}}</p>
            </mat-card-content>
            <mat-card-actions align="end" *ngIf="auth.currentUserId === post.authorId">
                <button mat-icon-button (click)="editing=true">
                    <mat-icon>edit</mat-icon>
                </button>
                <button mat-icon-button (click)="delete()">
                    <mat-icon>delete</mat-icon>
                </button>
            </mat-card-actions>
        </mat-card>
    </div>

此外,当我将鼠标悬停在已发布的日期上时new Date(), 它有以下消息:

常量日期:DateConstructor

new () => Date(+4 重载)

如果您知道这有什么问题,请告诉我要更改哪些内容以使日期管道显示在我的帖子上。

标签: javascriptangularfirebase

解决方案


您必须在 post list html 和 post detail html 中编写:

&bull; on {{post.published.toDate() | date: 'fullDate'}}

推荐阅读