Ng-select下拉框ng-template无数据显示及长内容tooltip需求

核心问题定位 #

原代码中自定义选项模板使用了错误的指令ng-option-tmp，Ng-select官方规范的自定义选项模板指令为ng-option，这是导致数据无法渲染的直接原因。同时需要兼顾下拉选项和选中后输入框的长内容tooltip需求。

修复后的完整代码 #

<div *ngIf="reasons$ | async as reasonList">
  <ng-select
    [items]="reasonList"
    [multiple]="false"
    formControlName="reason"
    appendTo="body"
    class="custom cursor-pointer"
    placeholder="Reason"
    bindLabel="name"
    bindValue="name"
  >
    <!-- 修复：替换为官方支持的ng-option指令 -->
    <ng-template ng-option let-item="item">
      <div [title]="item.name">{{ item.name }}</div>
    </ng-template>
    <!-- 补充：给选中后的输入框添加tooltip -->
    <ng-template ng-label-tmp let-item="item">
      <span [title]="item.name">{{ item.name }}</span>
    </ng-template>
  </ng-select>
</div>

关键修复与优化点 #

• 修正模板指令：将ng-option-tmp替换为ng-option，确保自定义模板被正确识别渲染。
• 下拉选项Tooltip：通过绑定[title]属性，鼠标悬停时显示完整选项内容。
• 选中项Tooltip：添加ng-label-tmp自定义选中项模板，解决选中后长内容被截断无法查看的问题。

可选样式优化（按需添加） #

如果需要限制下拉面板宽度，避免内容过度拉伸，可添加自定义CSS：

.custom .ng-dropdown-panel {
  max-width: 400px; /* 根据业务需求调整 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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