Datalist在Edge和IE11中显示不正确

Question

在我的.html中，我有一个指定一些值和一个带有2个选项的数据列表：

• 第一个：获取输入的值
• 第二个：其中I*ng表示值列表。

<input autoComplete="off" 
type="text" 
(change)="methodWhenIChangeMyValue()">
      <datalist id="{{row.MYOBJECT}}">
            <option value="{{value}}">{{value}}</option>
            <option *ngFor="let i of arrayToParse[row.MYOBJECT]" value="{{i.MYOBJECTID}}">
                    {{i.MYOBJECTID}}</option>
       </datalist>
</input>

在Firefox和Chrome中我的列表正常显示，但在Edge/IE11中只显示一个元素。所有数据都已加载，但我需要在选项中导航以显示它们。最后，当我拥有所有元素（在导航之后）时，如果我搜索一个更具体的元素，就会显示一个灰色块。我该怎么解决这个？

Answer 1

它看起来像是MS Edge（Microsoft Edge 44.17763.1.0,Microsoft EdgeHTML 18.17763)中的一个bug,我可以使用以下步骤重现它：

1. 启动以下演示:https://developer.mozilla.org/en-us/docs/web/html/element/datalist
2. 在“Choose your flavour”输入中逐个字母输入“chocolate”，然后逐个擦除所有字符，直到一个都没有。在输入下面出现的是一个破损的数据列表，如上面的屏幕截图。