Tengo ng-select con lista de valores. Si hago clic en el valor seleccionado y hago clic en Borrar, necesito establecer la primera opción. Por favor, ayúdenme a solucionarlo. 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>No hay una forma básica de lograr esto de forma nativa en ng-select .
Puede definir la devolución de llamada del evento (clear) y agregar su primer elemento en la matriz para lograr ese objetivo.
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', }); } }Ver los códigos:
multiple: true -> stackblitz
multiple: false -> stackblitz
Puede lograr esto usando un método clear .
en su componente agregue el siguiente código:
public selectedCity; constructor() { this.selectedCity = [this.cities3[0]]; } luego, en ng-select agregue un evento clear como se muestra a continuación:
<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>y luego registre el controlador de la siguiente manera:
resetCalculations() { this.selectedCity = [this.cities3[0]]; }aquí está el ejemplo de trabajo: Demostración de trabajo