web-dev-qa-db-fra.com

Comment effacer la sélection NG-SELECT

Est-il possible d'effacer programmatiquement la sélection d'une liste déroulante NG-SELECT? Je veux le comportement équivalent de cliquer sur l'icône CLEAR, mais déclenchée par programme.

Screenshot of ng-select dropdown, with clear icon circled in red

Je m'attendais à une méthode clear() ou quelque chose de similaire, mais le API documenté n'a rien sur ces lignes.

Ceci est mon code déroulant:

<ng-select class="ng-select-wrap"
           [searchFn]="multiTermSearch"
           [items]="calculationOptions"
           placeholder="Please select..."
           name="calculation"
           #calculationValue="ngModel"
           [(ngModel)]="selectedCalculation">
</ng-select>
angularangular-ngselect
13
Tim

Voici une solution du commentaire:

  // Access ng-select
  @ViewChild(NgSelectComponent) ngSelectComponent: NgSelectComponent;

  // Call to clear
  this.ngSelectComponent.handleClearClick();

Notez que handleClearClick _ n'est pas exposé dans la méthode de l'API publique, cependant comme TIM mentionné sa méthode publique afin qu'il soit possible de l'appeler.

8
Buczkowski

Je cherchais la même chose mais pour les modèles de l'invoquer à l'extérieur ng-select. Donc, le ci-dessous a bien fonctionné pour moi après la réponse acceptée. ^ _ ^

<ng-select class="ng-select-wrap"
           [searchFn]="multiTermSearch"
           [items]="calculationOptions"
           placeholder="Please select..."
           name="calculation"
           (clear)="resetCalculations();"
           [(ngModel)]="selectedCalculation" #selectDropdown>
</ng-select>

<input type="button" (click)="selectDropdown.handleClearClick()">

Cela garantit également que la fonction resetCalculations() être appelée.

3
Ashok M A

Effacement de la sélection peut être obtenu en définissant simplement la valeur NGModel à NULL. Dans le cas de l'exemple ci-dessus:

this.selectedCalculation = null;

Ce n'est pas exactement la même chose que de cliquer sur l'icône Clear, car elle ne déclenche pas le (clear) Événement de sortie, mais c'était suffisant pour mes besoins.

1
Tim

D'accord avec @tim et @Alexonozor, j'ai utilisé avec succès "SelectedCalculation" comme "chaîne", "chaîne []", "objet []" avec des formes réactives (et "chaîne" avec NGModel) et votre méthode suggérée a fonctionné sans heurts. J'ai aussi essayé d'utiliser "HandleclearClick" mais a échoué. Mettra à jour si je trouve mon chemin à travers elle.

Donc, cela.selectedCalculation = '' ou ceci.SelectedCalculation = [] (pour multipleelect = true) devrait fonctionner.

0
Red X

En supposant que l'échantillon de code affiché à l'origine ci-dessous.

<ng-select class="ng-select-wrap"
           [searchFn]="multiTermSearch"
           [items]="calculationOptions"
           placeholder="Please select..."
           name="calculation"
           #calculationValue="ngModel"
           [(ngModel)]="selectedCalculation">
</ng-select>

La variable selectedCalculation est créée comme une matrice et non une chaîne, car le NG-SELECT peut permettre de sélectionner plusieurs valeurs si [multiple]="true" Est défini.

Pour effacer la ou les valeurs sélectionnées dans le tableau de manière programmatique, utilisez:

this.selectedCalculation = [];

Si vous devez effacer les éléments liés, utiliser:

this.calculationOptions = [];

Les deux ci-dessus peuvent être effectués en ajoutant le gestionnaire (Modifier) ​​dans HTML.

(change)="change($event)

Quelque chose comme ça dans votre dossier.

change(event: any): void {
   this.calculationOptions = [];
   this.selectedCalculation = [];
  }
0
Robin Webb

Comme @tim Réponse est correct mais je préférerai vous définir comme une matrice vide au lieu de NULL pour enregistrer une pause en boucle.

this.selectedCalculation = [];
0
Alex Onozor