将 ng-template 用于 ng-select 时，清除图标“x”丢失

Question

对所选项目使用 ng-template 时。删除元素的“x”图标丢失了，关于使用 ng-template 的包的文档有点差，所以我一直在挖掘他们的来源，但没有运气。

我已经把这个stackblitz放在一起，所以你可以重现这个问题

HTML

<form>
  <ng-select 
  [items]="availableItems" 
  [multiple]="true" 
  [closeOnSelect]="false"
    [hideSelected]="true" 
  [searchable]="true" 
  placeholder="Choose an item" 
  [(ngModel)]="selectedItems"
     name="item">
        <ng-template ng-label-tmp let-item="item">
            <div>{{item.name}}</div>
        </ng-template>
        <ng-template ng-option-tmp let-item="item">
            <div>{{item.name}}</div>
        </ng-template>
    </ng-select>
</form>

组件.ts

export class AppComponent {

  availableItems = [
    { id: 1, name: 'name 1', value: 'value 1' },
    { id: 2, name: 'name2', value: 'value 2' },
    { id: 3, name: 'name 3', value: 'value 3' },
    { id: 4, name: 'name 4', value: 'value 4' }
  ];
  selectedItems = [
    { id: 2, name: 'name2', value: 'value 2' },
    { id: 3, name: 'name 3', value: 'value 3' },
  ]
}

有什么想法吗？

Answer 1

传入自定义模板时，需要在其中定义清除按钮。请参考这里的文档：https : //ng-select.github.io/ng-select#/multiselect

您需要的是一个类似于以下内容的模板：

<ng-template ng-label-tmp let-item="item" let-clear="clear">
    <span class="ng-value-label">{{item.login}}</span>
    <span class="ng-value-icon right" (click)="clear(item)">×</span>
</ng-template>

我已经修改了您的 StackBlitz 以添加此功能。你可以在这里找到它。