ng-select中包裹ng-template的作用是什么？移除后显示无差异

你遇到的这个场景里，这个ng-template是ng-select提供的自定义选项渲染模板，之所以移除后显示效果完全一致，是因为你写的模板内容和ng-select的默认渲染逻辑完全重合了。

具体拆解： #

• 默认渲染逻辑：当你设置了bindLabel="name"，ng-select会自动把每个item的name属性作为选项的显示文本，这和你在模板里写{{ item.name }}的效果完全一样，所以移除模板后看不出区别。
• 模板的真正价值：它是用来突破默认渲染限制的入口，当你需要更复杂的选项展示时，就能体现出作用：
  • 给选项添加图标、标签（比如热门城市标记）
  • 同时展示多个字段（比如城市名+邮编+区域）
  • 基于选项状态动态调整样式（比如高亮选中项、hover态自定义）
  • 在选项内添加交互元素（比如快捷操作按钮）

举个实用的例子： #

如果要实现带图标和热门标签的城市选项，模板就必不可少：

<ng-select
  [items]="cities"
  [(ngModel)]="selectedCity"
  bindLabel="name"
  bindValue="name"
>
  <ng-template
    ng-option-tmp
    let-item="item"
    let-item$="item$"
  >
    <div class="custom-option">
      <span class="city-icon">🏙️</span>
      <span>{{ item.name }}</span>
      <span *ngIf="item.isHot" class="hot-badge">热门</span>
      <span class="postcode">({{ item.postcode }})</span>
    </div>
  </ng-template>
</ng-select>

另外模板里的item$还能拿到选项的状态流（比如是否选中、是否处于hover状态），可以基于这个做更灵活的样式控制，比如：

<ng-template
  ng-option-tmp
  let-item="item"
  let-item$="item$"
>
  <div [class.active-option]="item$.selected">
    {{ item.name }}
  </div>
</ng-template>

简单来说，你看到的示例只是演示了自定义模板的基础用法，和默认行为重合所以没差异，但它是ng-select提供的核心扩展能力，用于满足复杂的选项展示需求。

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