将 ng-template 用于 ng-select 时缺少清除图标 'x'
Clear icon 'x' missing when using ng-template for ng-select
对所选项目使用 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>
component.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' },
]
}
有什么想法吗?
传入自定义模板时,需要在里面定义清除按钮。请参阅此处的文档: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 以添加此功能。你可以找到它 here.
对所选项目使用 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>
component.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' },
]
}
有什么想法吗?
传入自定义模板时,需要在里面定义清除按钮。请参阅此处的文档: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 以添加此功能。你可以找到它 here.