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

我刚刚完成了一个表单控件组件，它通过GoogleMapsPlacesAutoCompleteJSAPI自动完成用户的输入。它工作得很好，直到我尝试以相同的形式使用其中的两个。在这种情况下，只有第一个有效，第二个无效。没有错误消息，只是不起作用

---

我相信这更像是一个我似乎没有遵循的一般编程实践，而不是一个实际的bug，但这很奇怪，因为据我所知，每个组件都有自己的范围，不能相互冲突。那么，为了避免这种情况，在创建组件时有什么特殊的规则吗？

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

我的组件使用文本输入输入城市名称。文本输入有一个

list

属性，指向由Google Maps API填充的

datalist

。（虽然可以直接将API链接到DOM元素并让API处理它，但我决定让它更“Angularish”，并将API调用放入服务中，通过包含API答案的数组填充

datalist

）

是

数据列表

导致了问题。HTML5

datalist

元素必须有一个

id

属性，该属性通过其

list

属性将其链接到

input

字段。问题是，如果您使用同一表单元素组件的两个或多个实例，那么datalist

id

properties会以某种方式混淆。您将得到两个具有相同

id

属性的元素，因此您的代码将无法工作

解决方案是生成一个随机字符串，并将其传递给数据列表的

id

属性和输入的

list

属性。这是：

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

{{option}}

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