如何在ng-select中初始设置值?

Question

我有一个值列表的ng-select。如果我点击所选值并点击清除，需要设置第一选项。请帮助我如何整理它。https://stackblitz.com/edit/ng-select-wdcg5a?file=app/app.component.ts

<ng-select class="" [items]="assigneeStatus" name="status_filter_id"
bindLabel="lookup_label" bindValue="com_lookup_id" placeholder="Assignee Status"
[(ngModel)]="searchAssigneeObj.status_filter_id" [hideSelected]="true"
#status_filter_id="ngModel">
<ng-template ng-label-tmp let-item="item">
<span>{{item.lookup_label ||  'All'}}</span>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-search="searchTerm"
let-index="index">
<span>{{item.lookup_label || ''}}</span>
</ng-template>
</ng-select>

Answer 1

在ng-select中没有原生实现此功能的基本方法。

您可以定义(clear)事件的回调，并将您的第一个项目添加到数组中以实现该目标。

HTML:

<ng-select [items]="cities3"
bindLabel="name"
multiple = true
placeholder="Select at least one city"
[(ngModel)]="selectedCities"
(clear)="clearSelect()">
<ng-template ng-label-tmp let-item="item">
<b>{{item.name}}</b> is cool
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<b>{{item.name}}</b>
</ng-template>
</ng-select>    

TS:

export class AppComponent {
selectedCities = [];
cities3 = [
{
id: 0,
name: 'Vilnius',
},
{
id: 2,
name: 'Kaunas',
},
{
id: 3,
name: 'Pavilnys',
},
];
constructor() {}
addCustomUser = (term) => ({ id: term, name: term });
public clearSelect() {
this.selectedCities = [];
this.selectedCities.push({
id: 0,
name: 'Vilnius',
});
}
}

参见代码:

multiple: true->stackblitz

multiple: false->stackblitz

Answer 2

您可以使用clear方法实现此功能。

在你的组件中添加下面的代码:

public selectedCity;  
constructor() {
this.selectedCity = [this.cities3[0]];
}

然后在ng-select中添加clear事件，如下所示:

<ng-select 
[items]="cities3"
bindLabel="name"
multiple = true
placeholder="Select city"
(clear)="resetCalculations();"
[(ngModel)]="selectedCity">
<ng-template ng-label-tmp let-item="item">
<b>{{item.name}}</b> is cool
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<b>{{item.name}}</b>
</ng-template>
</ng-select>  

，然后注册处理程序，如下所示:

resetCalculations() {
this.selectedCity = [this.cities3[0]];
}

下面是工作示例: