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

Question

我想在Angular中datetime为time元素添加属性:

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

但得到下一个错误:

错误:模板解析错误:无法绑定到'datetime',因为它不是'time'的已知属性.("class ="entry-date published"> {{post.date_gmt | date:'short'}}

解决方案是什么？谢谢你的帮助

Answer 1

纠正小写[dateTime].

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

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

</time>

试试吧.

Answer 2

您正在非组件元素上使用模板绑定语法。

当你编写时[datetime]="..."，它告诉 Angular 将表达式绑定到一个@Input()命名的datetime，但该<time>标签不是任何组件或指令的一部分。

如果您希望 Angular 将值分配给元素的属性，则必须使用属性语法。

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

通常，您可以使用语法将表达式分配给属性{{ }}。例如<time datetime="{{post.modified_gmt}}"></time>，但这仅当 Angular 在其支持的 HTML 元素和属性的白名单中具有该属性时才有效。看来datetime不支持。

NO_ERRORS_SCHEMA您可以通过添加到您的内容来抑制错误消息@NgModule()，但这只会隐藏错误。该表达式仍然不会设置该datetime属性。

有一种方法可以使用添加您自己的自定义架构CUSTOM_ELEMENTS_SCHEMA并告诉 Angular 支持该datetime属性，但我不知道它是如何工作的，并且认为不值得。就用[attr.datetime]代替吧。

Answer 3

将时间声明datetime为@Input() datetime;内部组件，如下所示：

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

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