同一个Angular组件的两个实例中的datalist元素之间的冲突

Question

我刚刚完成了一个表单控件组件，它通过Google Maps Places Autocomplete JS API自动填充用户的输入。它工作得很好，直到我尝试以相同的形式使用其中两个。在这种情况下，只有第一个工作，第二个没有做任何事情。没有错误消息，它只是无法正常工作。

我认为这更像是一种普通的编程习惯，我似乎没有遵循比实际的错误，但它很奇怪，因为据我所知，每个组件都有自己的范围，并且可以＆＃39;相互冲突。那么，是否有任何关于创建组件的特殊规则以避免这种情况？

Answer 1

好的，这就是发生的事情。我的组件没有任何问题，我没有违反任何不成文的规则。但是Angular的DOM处理可能存在错误。

我的组件使用文本输入来输入城市名称。文本输入的list属性指向datalist，该属性由Google Maps API填充。 （虽然可以直接将API链接到DOM元素并让API处理它，但我决定使其更加“Angularish”并将API调用放入服务中，通过包含以下内容的数组填充datalist API的答案。）

导致问题的是datalist。 HTML5 datalist元素必须具有id属性，该属性通过其input属性将其链接到list字段。问题是，如果您使用相同表单元素组件的两个或更多实例，则数据主义id属性会以某种方式混淆Angular。您最终会得到两个具有相同id属性的元素，因此您的代码将无效。

解决方案是生成随机字符串并将其传递给datalist的id属性和输入的list属性。这是：

<input type="text" formControlName="location" [attr.list]="randomName">
<datalist [id]="randomName">
  <option *ngFor="let option of optionList">{{ option }}</option>
</datalist>

这可能是Angular中的一个错误。 DOM元素属性不限于组件自己的范围。