angular - Datalist not displaying properly in Edge and IE11

Question

In my .html I've a to assign some value and a datalist with 2 option :

• The first : to take the value of my input
• The second : where I *ngFor a list of values.

<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>

In Firefox and Chrome my list displays normally, but in Edge/IE11 only one element is displayed. All data are loaded, but I need to navigate inside my option to show them. Finally, when I've all my element (after a navigation) if I search an element more specific a grey block is displayed. How can I fix this ?

All my actions for < input > are not refered inside this snippet.

Only one element is displayed at the beginning:

A grey block is displayed when I search a more specific value:

标签： angularinternet-explorer-11microsoft-edgehtml-datalist

Answer 1

它看起来像 MS Edge 中的一个错误（Microsoft Edge 44.17763.1.0，Microsoft EdgeHTML 18.17763），我能够使用以下步骤重现它：

1. 启动以下演示：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
2. 在“选择你的口味”输入中一个字母一个字母地输入“巧克力”这个词，然后一个一个地删除所有字符，直到一个字母都没有。出现的是输入下方的损坏数据列表，如上面的屏幕截图。