在 Angular 运行时动态调用时，toLocaleDateString 不是函数答案

【问题标题】：toLocaleDateString is not a function when called dynamically in Angular runtime在 Angular 运行时动态调用时，toLocaleDateString 不是函数
【发布时间】：2020-09-24 16:52:30
【问题描述】：

我有一个 ActionInstruction 类型的元素数组。有些是在组件的构造函数中添加的，有些是由用户通过对话框表单字段动态添加的。

 actionInstructions: ActionInstruction[];

 constructor(private _formBuilder: FormBuilder, public dialog: MatDialog) {
 this.actionInstructions = [{post_date_start: new Date()}];
 }

 someMethod(){
    // get result of Type ActionInstruction from Dialog -> newInstruction
  this.actionInstructions.push(newInstruction);
 }

数组的内容在视图中显示如下：

<div *ngFor="let actionInstruction of actionInstructions">
      <div *ngIf="actionInstruction.post_date_start"   (click)="openActionCreation(actionInstruction)" class="action-instruction">
         <div class=" fl ml-50">
          Am {{actionInstruction.post_date_start.toLocaleDateString()}}
         </div> 
      </div>
</div>

在构造函数中添加的元素在开始时使用本地化日期没有任何问题。但是通过表单动态添加元素后，会抛出以下错误：

起初我以为这可能是在运行时在视图中调用它引起的，但问题实际上发生在另一个完全独立的组件中，我准备要在视图中显示的变量，在具有相同功能的构造函数中.

 constructor(){
   if(this.user.birthday != null){
        this.localizedBirthday = this.user.birthday.toLocaleDateString();
    }
  }

在这里，当错误发生和不发生时，它似乎完全没有模式。这两个组件唯一的共同点是，它们在视图组件中使用了一些 *ngIf 模式，其中显示了日期。

【问题讨论】：

标签： html angular typescript date localization

【解决方案1】：

不是直接的解决方案，但您可以在组件中使用日期管道。 https://angular.io/api/common/DatePipe

它看起来像这样：

<div class=" fl ml-50">
  Am {{actionInstruction.post_date_start | date:'medium' }}
</div>

【讨论】：