“值”应该是有效的 JavaScript 日期实例

Question

我正在开发一个 asp.net - angular 5 web 应用程序，我需要加载一个带有空字段的组件来填充，其中一些字段是 KendoDatePicker（用于 Angular），我需要选择是否选择（插入）日期，当我加载组件时日期未定义，并且出现此错误：

错误：“值”应该是有效的 JavaScript 日期实例。检查http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json以获得可能的解决方案。

现在，我已经阅读了文档并尝试了这个 stackblitz 示例完美的工作：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
    <div class="example-config">
        Selected value is: {{exampleDate| kendoDate:'MM/dd/yyyy'}}
    </div>
    <div class="example-wrapper" style="min-height: 400px">
        <p>Select a date:</p>
        <kendo-datepicker
            [(ngModel)] = "exampleDate"
            placeholder="inserisci una data..."
        ></kendo-datepicker>
    </div>
    `
  })
export class AppComponent {
 public exampleDate: Date;

   constructor()
   {
    //undefined (as I want before the selection, browser consolle does not 
    return error)
    console.log(this.exampleDate);
   }
 }

这就是我的项目（component.ts）中的内容：

DatiGeneraliDocumento_Data: Date;

和 component.html

  <div class="alto5">

            <kendo-datepicker
                              [(ngModel)]="_fatturaCorrente.DatiGeneraliDocumento_Data" 
                              name="DataDocumento" style="width:100%;" 
                              placeholder="Inserisci una data...">
              <kendo-datepicker-messages today="OGGI"></kendo-datepicker-messages>
            </kendo-datepicker>

         <div class="cl"></div>
        </div>

所以，在我的项目中，我遇到了上述错误，我想消除它，提前致谢。

Answer 1

您是否尝试过在插值中使用安全导航器？IE：

   <div class="example-config">
        Selected value is: {{exampleDate?| kendoDate:'MM/dd/yyyy'}}
    </div>

我添加了一个 stackblitz。我在 DatePipe 中使用 Angular 的构建，但它应该以同样的方式为您工作。

例子

这是您的模板的代码：

{{(exampleDate? ('Your date' + exampleDate |kendoDate:'MM-dd-yyyy') : '')}}

这是我要放入组件中的内容：

exampleDate = new Date(dateVariable);