将 '[object Object]' 转换为日期角度 4答案

【问题标题】：convert '[object Object]' to date angular 4将 '[object Object]' 转换为日期角度 4
【发布时间】：2018-02-05 17:02:20
【问题描述】：

如何将 '[object Object]'(datepicker) 转换为日期格式

<input type="text"
       id="date"
       class="form-control"
       formControlName="date"
       name="date"
       [(ngModel)]="date"
       ngbDatepicker
       #incorporatedDatePicker="ngbDatepicker"
       (click)="incorporatedDatePicker.toggle()"
       readonly>

当我显示时

    {{meeting.date | date }}

我有错误：invalidPipeArgument Error '[object Object]' for pipe 'DatePipe'

【问题讨论】：

日期长什么样？
如果我不添加日期管道，它会返回 [object Object]
显示日期对象json
请通过此链接ng-bootstrap.github.io/#/components/datepicker/examples
我不想要它 json 我想要日期形式，当我将 json 转换为日期 {{meeting.date | json | date:'short'}} ，我有 InvalidPipeArgument: '{ "day": 18, "month": 8, "year": 2017 }' for pipe 'DatePipe'

标签： angular date typescript datepicker angular-cli

【解决方案1】：

试试这个：

{{meeting.date.seconds * 1000 | date:'MM-dd-yyyy'}}

【讨论】：

请在答案中添加一些解释。以便其他人可以了解正在发生的事情。以及它是如何解决问题的。
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案2】：

对于那些仍在寻找答案的人，您必须使用NgbDateAdapter 提供程序，如docs 所示：

import { NgbModule, NgbDateAdapter, NgbDateNativeAdapter } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    NgbModule.forRoot(),
    ...
  ],
  providers: [{
    provide: NgbDateAdapter,
    useClass: NgbDateNativeAdapter
  }]
})
export class AppModule { }

然后在输入上使用[(ngModel)]="from" 时，它会自动将模型用作Date

【讨论】：

【解决方案3】：

在组件中

export class DateComponent implements OnInit {
      objDate = Date.now();
}

在 HTML 中

<strong>{{ objDate | date :'fullDate' }}</strong>

输出

Thursday, February 15, 2018

【讨论】：

【解决方案4】：

根据您的评论，您尝试向DatePipe 提供的内容是...

{ "day": 18, "month": 8, "year": 2017 }

Angular 无法读取这样的对象并理解这是一个日期。您需要先将其转换为 Angular 可以理解的某种格式。 docs 中提到了可接受的格式：

date_expression | date[:format]

expression 是日期对象或数字（自 UTC 纪元以来的毫秒数）或 ISO 字符串 (https://www.w3.org/TR/NOTE-datetime)。

【讨论】：

我仍然不知道如何将 json 转换为 DatePipe 接受的任何格式！