使用ng模板进行ng选择时缺少'x'清除图标

Question

对所选项目使用ng模板时。删除元素的"x"图标丢失了，包中关于使用ng模板的文档有点糟糕，所以我一直在挖掘它们的来源，但运气不佳。

我把这个堆栈放在一起，这样你就可以复制问题

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

传入自定义模板时，需要在模板内部定义clear按钮。请参阅此处的文档：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以添加此功能。你可以在这里找到它。