Angular移除日历图标及Angular7 nz-zorro右侧日历图标移除咨询

嘿，我来帮你搞定这个问题！你完全不用依赖display:none这种临时的CSS hack——NG-ZORRO的日期选择器组件本身就提供了官方的配置方式，直接就能移除右侧的日历图标，而且根本不用去碰那些组件内部生成的span标签。

具体实现方法 #

NG-ZORRO的nz-date-picker（包括同系列的nz-range-picker等组件）提供了一个nzSuffixIcon输入属性，你只需要把它绑定为null，就能直接移除默认的日历图标：

<!-- 原来的代码 -->
<nz-date-picker [(ngModel)]="yourDateValue"></nz-date-picker>

<!-- 修改后的代码，移除图标 -->
<nz-date-picker [(ngModel)]="yourDateValue" [nzSuffixIcon]="null"></nz-date-picker>

如果你的项目用的是响应式表单，写法也一样，只需要加上[nzSuffixIcon]="null"这个绑定即可：

<nz-date-picker formControlName="dateControl" [nzSuffixIcon]="null"></nz-date-picker>

为什么HTML里找不到那个span？ #

你在自己写的模板里看不到那个图标对应的span，是因为它属于NG-ZORRO组件的内部渲染结构——组件会在运行时自动生成这些元素，所以我们不需要手动操作它们，直接通过组件提供的输入属性就能控制显示逻辑。

这种方式比用CSS隐藏要优雅得多：不仅不会有多余的DOM元素残留，还能避免后续NG-ZORRO版本更新时，组件内部结构变化导致CSS选择器失效的问题。

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