Angular中的错误：模板解析错误：无法绑定到'datetime'，因为它不是'time'的已知属性

Question

I want to add attribute datetime to time element in Angular:

 <time class="updated" [datetime]="post.modified_gmt"> {{ post.modified_gmt | date: 'short'}} </time> 

But get next error:

Error: Template parse errors: Can't bind to 'datetime' since it isn't a known property of 'time'. (" class="entry-date published">{{ post.date_gmt | date: 'short'}}

What the solution? Thanks for any help

Answer 1

correct the lowercase [dateTime] .

<time 
  class="updated" 
  [dateTime]="post.modified_gmt">

{{ post.modified_gmt | date: 'short'}}

</time>

Have try.

Answer 2

You are using template binding syntax on a non-component element.

When you write [datetime]="..." it tells Angular to bind the expression to an @Input() named datetime , but the <time> tag is not part of any component or directive.

You have to use attribute syntax if you want Angular to assign the value to the element's attributes.

<time class="updated" [attr.datetime]="post.modified_gmt">{{ post.modified_gmt | date: 'short'}}</time>

Normally, you can assign expressions to attributes using {{ }} syntax. Such as <time datetime="{{post.modified_gmt}}"></time> , but this only works if Angular has the attribute in it's whitelist of supported HTML elements and attributes. It appears datetime is not supported.

You can suppress the error message by adding NO_ERRORS_SCHEMA to your @NgModule() but this only hides the error. The expression will still not set the datetime attribute.

There is a way to add your own custom schemas using CUSTOM_ELEMENTS_SCHEMA and tell Angular to support the datetime attribute, but I don't know how it works and don't think it's worth it. Just use [attr.datetime] instead.

Answer 3

Declare datetime as @Input() datetime; inside component for time as below :

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

@Component({
  selector: 'time',
  template: `your template goes here`
})
export class TimeComponent {
  @Input() datetime: any;
}