Dart中绑定<time>标签datetime属性报错的解决方法咨询

Don't give up on this implementation—it's totally fixable! The error you're seeing happens because Angular's template compiler doesn't recognize datetime as a native input property for the <time> element by default. Here's how to resolve it:

Solution 1: Use the attr. Prefix for Property Binding #

The simplest fix is to explicitly tell Angular you're binding to an HTML attribute by adding the attr. prefix to your binding. This bypasses the input property check and directly sets the native HTML attribute on the <time> tag.

Example Code: #

Component Class:

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

@Component({
  selector: 'app-time-display',
  templateUrl: './time-display.component.html'
})
export class TimeDisplayComponent {
  // Ensure this is an ISO 8601 formatted string (required for valid datetime)
  eventDatetime = '2024-05-20T14:30:00Z';
}

Template:

<time [attr.datetime]="eventDatetime">May 20, 2024 at 2:30 PM</time>

Why This Works #

Angular distinguishes between component/directive input properties and native HTML attributes. Since datetime isn't registered as an input property for the <time> element in Angular's type definitions, using attr. tells the compiler to treat it as a standard HTML attribute instead.

Bonus: Verify Your Date Format #

While this fixes the compile error, make sure your bound value is a valid ISO 8601 string (like YYYY-MM-DDTHH:mm:ssZ). This format is required for the datetime attribute to work correctly with screen readers and search engine indexing.

内容的提问来源于stack exchange，提问作者amiry jd