Angular新手求助：Date picker在IE浏览器无法正常工作

嘿，作为Angular新手碰到IE的兼容性坑真的挺闹心的，我来帮你拆解下可能的问题和解决办法～

首先，咱们先从IE本身的兼容性限制说起：IE11及更早的版本完全不支持HTML5的<input type="date">标签，它会把这个类型的输入框当成普通的文本框来渲染，没有自带的日期选择器UI。而Chrome、Firefox这些现代浏览器都原生支持这个标签，所以这是你遇到跨浏览器差异的核心原因之一。

再看看你的代码逻辑，这里有两个需要注意的点：

• ngIf条件可能写反了：你的代码里是<div *ngIf="question.type!='date'">，这意味着只有当question.type不等于date的时候，这个输入框才会显示。但你要的是Date picker，那是不是应该把条件改成*ngIf="question.type=='date'"？如果条件写反了，当后端返回的类型是date时，输入框会被直接隐藏，这也会导致看不到日期选择器（不过你说其他浏览器正常，可能后端返回的question.type不是date？这里需要你再核对下后端返回的数据）。

• 属性绑定冲突：你在input标签上同时写了type="date"和[type]="question.type"，Angular中属性绑定的优先级更高，所以最终input的类型会被question.type的值覆盖。如果后端返回的question.type不是date，那即使在现代浏览器里也不会显示日期选择器，所以要确认后端返回的question.type确实是date类型。

具体解决步骤 #

1. 修复代码逻辑问题：
   先把ngIf条件修正为你实际需要的逻辑，比如要显示日期选择器的话，改成：

   <div *ngIf="question.type=='date'"> 
     <input type="date" class="form-control" [formControlName]="question.key" [id]="question.key">
   </div>
   

   这里可以去掉重复的[type]="question.type"，因为已经通过ngIf限定了类型是date，直接写type="date"就够了。

2. 解决IE兼容性问题：
   因为IE不支持原生date输入，所以需要使用第三方的Angular日期选择器组件，比如：

   • Angular Material的MatDatepicker：它会自己渲染日期选择器UI，不需要依赖浏览器原生支持，在IE11上可以正常工作（需要注意配置对应的polyfills）。
   • ng-bootstrap的NgbDatepicker：同样兼容IE11，基于Bootstrap样式，集成起来也比较方便。

   使用第三方组件时，记得按照官方文档安装对应的依赖、导入模块，然后替换原生的input标签为组件提供的日期选择器控件。

3. 添加必要的Polyfills：
   如果使用第三方组件，确保你的Angular项目已经配置了IE所需的polyfills，比如在polyfills.ts中导入core-js相关的垫片，以及classlist.js等，这些是Angular在IE上运行的基础。

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