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將表達式綁定到名為datetime的@Input() ，但<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;
}