如何让Angular @ng-select组件无论是否选中选项都显示自定义模板

原因说明 #

@ng-select 内置的 ng-multi-label-tmp 模板设计上仅在存在选中项时触发渲染，无选中项时组件会默认渲染占位符区域，所以你写在该模板内的静态内容在空选状态下自然不会显示。

解决方案 #

你需要同时定义两个自定义模板：原有ng-multi-label-tmp负责有选中项的场景，新增ng-placeholder模板负责空选场景，相同的静态内容可以抽成公共模板复用，避免代码冗余。修改后的代码如下：

<!-- 抽离公共的静态内容模板，避免两处重复写 -->
<ng-template #commonLabelPrefix>
  <div class="ng-value">
    <span class="ng-value-label">                                                        
      <!-- 你原来放在这里的图标、标签等静态内容 -->                                                                                    
    </span>                                               
  </div>
</ng-template>

<ng-select
  [items]="users$ | async"
  [multiple]="true"
  bindLabel="name"
  bindValue="email"
  [(ngModel)]="selectedUsers">
  <!-- 空选状态下的自定义占位符模板 -->
  <ng-template ng-placeholder>
    <ng-container *ngTemplateOutlet="commonLabelPrefix"></ng-container>
  </ng-template>
  <!-- 有选中项时的模板 -->
  <ng-template ng-multi-label-tmp let-items="items">
    <ng-container *ngTemplateOutlet="commonLabelPrefix"></ng-container>
    <div class="ng-value" *ngFor="let item of items">
      <span class="ng-value-label"> {{item.name}}</span>
      <span class="ng-value-icon right" (click)="clear(item)">×</span>
    </div>
  </ng-template>
</ng-select>

如果不需要复用，也可以直接在两个模板里分别写对应的静态内容，调整后两种场景下都能正常显示你要的自定义内容。

内容的提问来源于stack exchange，提问作者Athreya M R Bhatt