Angular为<i>标签绑定alt属性提示未知属性报错如何解决

<i> 标签属于文本格式化标签，本身没有原生 alt 属性，alt 是 <img> 等媒体元素的专属属性，Angular 默认会校验元素的原生属性合法性，给不支持的元素绑定不存在的原生属性就会抛出你遇到的报错。

• 方案1：使用attr.前缀绑定自定义属性
  如果你确实需要给<i>标签加上alt属性，只需要给属性名加上attr.前缀，告诉Angular这是要添加到DOM上的自定义属性，不需要校验原生属性合法性，修改后的代码如下：

<div class="search-result__indicators">
    <i *ngFor="let tag of resultTags(result)"
       [class.audio-icon]="tag == 'Audio'"
       [class.image-icon]="tag == 'Image'"
       class="c-glyph" role="presentation"></i>

    <i *ngFor="let tag of resultTags(result)"
       [class.video-icon]="tag == 'Video'"
       class="c-glyph" 
       [attr.alt]="'文章包含视频内容'">
    </i>
</div>

• 方案2：使用更符合无障碍规范的aria-label属性
  如果你加alt属性的目的是为了让屏幕阅读器能识别图标含义，更推荐用aria-label属性，这是W3C规范中专门用于给非文本元素添加描述的属性，适配性更好，修改方式同理，将对应属性改成[attr.aria-label]="'文章包含视频内容'"即可。
• 方案3：适配<img>标签的修改
  如果你坚持要使用<img>标签，需要补充src属性，导入对应的视频图标图片资源，同时可以直接绑定alt属性，修改示例如下：

<img *ngFor="let tag of resultTags(result)"
     [class.video-icon]="tag == 'Video'"
     class="c-glyph" 
     src="你的视频图标资源本地路径/远程地址"
     alt="文章包含视频内容">

原来的<i>标签是通过字体图标渲染样式，替换为<img>后没有指定图片资源就会导致应用渲染异常，补充对应资源路径即可解决。

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