Angular 13 Bootstrap 5添加动态datalist选项报绑定错误

• 变量绑定逻辑错配：组件类中已经定义了用于接收datalist唯一标识的@Input() datalistId: string属性，但模板中完全没有使用该变量，反而将存储选项列表的数组类型变量datalistOptions绑定给了input的list属性、datalist的id属性，数组无法作为HTML id的合法值，逻辑上完全不匹配。
• Angular绑定规则触发校验报错：<input>元素的list是HTML attribute，不是input DOM实例可写的内置property。当你用插值语法{{}}或方括号[list]做动态绑定时，Angular默认会尝试将值绑定到DOM元素的可写property上，找不到对应可写property就会抛出*"Can't bind to 'list' since it isn't a known property of 'input'"*错误。静态写死list属性值时不会触发报错，是因为静态属性会直接写入HTML attribute，不会走Angular的property绑定校验流程。

只需要修正子组件datalist.component.html的绑定逻辑即可，其余代码无需改动：

1. 对input的list属性绑定添加attr.前缀，明确告知Angular这是HTML attribute绑定，同时将绑定值替换为正确的datalistId变量
2. 将datalist标签的id绑定值替换为datalistId，保证和input的list属性值一致，让两者能正确关联

修正后的datalist.component.html代码如下：

<div>
  <label for="{{ id }}" class="form-label">{{ label }}</label>
  <input
    class="form-control"
    [attr.list]="datalistId"
    [id]="id"
    [placeholder]="placeholder"
  />
  <datalist [id]="datalistId">
    <option
      *ngFor="let option of datalistOptions"
      value="{{ option }}"
    ></option>
  </datalist>
</div>

修正后动态生成的datalist可以正常和input关联，遍历渲染的选项会正常出现在输入框的自动补全列表中，绑定错误会完全消失。

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