Angular中如何将TypeScript变量赋值给HTML自定义属性

Angular中绑定data-*类的自定义HTML属性，需要使用带attr.前缀的属性绑定语法，这是因为data-*不属于DOM元素的内置固有属性，无法直接使用常规的属性绑定逻辑。

针对你的场景的正确写法 #

你提到的嵌套对象属性绑定场景，代码如下：

// TypeScript 代码
public selectedWorkOrder: WorkOrder; // WorkOrder为自定义接口

对应的HTML绑定写法：

<input 
  class="form-check-input" 
  type="radio" 
  name="flexRadioDefault" 
  id="flexRadioDefault1"
  [attr.data-start-time]="selectedWorkOrder?.window1StartTime"
  [attr.data-end-time]="selectedWorkOrder?.window1endTime"
>

两种绑定方式对比 #

• 属性绑定（推荐）：用[attr.xxx]写法，当绑定的值为null/undefined时，Angular会自动移除对应属性，不会在DOM上残留无效属性
• 插值写法：你原先的data-start-time="{{xxx}}"写法在大部分场景下也可运行，但空值时会渲染为空字符串，且部分AOT编译场景下会触发警告，更推荐使用属性绑定写法。

自定义属性取值方式 #

后续如果需要在TypeScript中读取绑定的属性值，可通过两种方式获取：

const inputEl = document.querySelector('#flexRadioDefault1') as HTMLInputElement;
// 方式1：通过dataset对象读取（自动转驼峰命名）
const startTime = inputEl.dataset.startTime;
// 方式2：通过getAttribute读取
const endTime = inputEl.getAttribute('data-end-time');

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