Angular使用datalist时报Only void and foreign elements can be self closed错误如何解决

报错核心原因：datalist不是HTML空元素，不支持自闭合写法，你代码中将<datalist>写成自闭合标签<datalist id="labelTypes"/>，同时将option元素放在了datalist结构外部，触发Angular模板解析错误。

修复步骤：

• 把自闭合的datalist标签改为普通开闭标签对
• 将所有option元素移动到datalist标签内部
• 可选优化：给第一个提示option添加disabled属性，防止用户选中空提示项

修复后代码：
TS代码无需修改：

let labelType = ['parking', 'title', 'country'];

修正后的HTML模板：

<form #myForm="ngForm">
  <div class="labelFormDiv">
    <div class="form-group">
          <label for="groupLabel">label group</label>
          <input type="text" list="labelTypes" class="form-control" id="groupLabel" required [(ngModel)]="label.groupLabel" name="groupLabel">
          <!-- 修正datalist写法，不再自闭合，包裹所有option -->
          <datalist id="labelTypes">
           <option value disabled>select a label type</option>
           <option *ngFor="let labelTypes of labelType">{{labelTypes}}</option>
          </datalist>
    </div>
 </div>
</form>

<button type="submit" [disabled]="!myForm.valid" class="btn btn-primary" (click)="submitLabelForm()">Sauver</button>
<button type="button" class="btn btn-danger" (click)="cancelLabelForm()">Annuler</button>

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