4
votes

Ouvrir la sélection parmi ts (angulaire, ng-select)

J'ai plusieurs ng-selects sur une page, et j'essaie d'en ouvrir un à partir de ts.

Je peux me concentrer sur le bon ng-select en utilisant ce qui suit:

_this.ngselect.last.filterInput.nativeElement.open is not a function

angular angular-ngselect

0 commentaires

3 Réponses :

0
votes

Il existe un moyen beaucoup plus simple de réaliser ce que vous voulez. Si vous consultez la documentation (trouvée ici: https://github.com/ng-select / ng-select # api ), vous constaterez que vous pouvez passer isOpen à ng-select . Les modifications de la valeur de isOpen passées à droite ng-select l'ouvriraient et le fermeraient automatiquement.

Exemple:

<ng-select
  [isOpen]="isOpen"
  [items]="items"
>
</ng-select>

1 commentaires

Merci pour votre aide, même si je pense que cela finit par rendre les choses beaucoup plus compliquées. Changer isOpen en true fait qu'il ne se ferme pas (false pour qu'il ne s'ouvre pas). Cela signifie que je dois aussi écouter les changements. Puisqu'il y a plusieurs sélections, je dois également créer un tableau d'isOpen pour spécifier le bon.

7
votes

Avez-vous essayé quelque chose comme ceci

<ng-select #Selecter ></ng-select>

@ViewChild('Selecter') ngselect: NgSelectComponent;

ngAfterViewInit() {
  this.ngselect.open();
}

Exemple de travail Liens vers stackblitz

2 commentaires

Merci, bien que cela donne la même erreur que j'ai ci-dessus.

Mise à jour de ma réponse avec un lien vers un exemple en direct sur stackblits

1
votes

Vous devrez peut-être également l'ouvrir dans votre fichier de test , lorsque vous souhaitez vérifier des éléments dans le DOM, etc.:

1. Créez un fichier et ajoutez-le (ou ajoutez-le à un fichier existant si vous préférez)

// Open the dropdown
triggerKeyDownEvent(getNgSelectElement(fixture), 32);
fixture.detectChanges();

2. Importez les fonctions dans votre fichier de test et utilisez-les comme ceci:

import { DebugElement } from '@angular/core';
import { ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

/*
* Utils based on ng-select helper functions:
  https://github.com/ng-select/ng-select/blob/3018a1098ba2ad06fbdf4dfe60209087cbd68185/src/ng-select/testing/helpers.ts
*/
export function getNgSelectElement(fixture: ComponentFixture<any>): DebugElement {
    return fixture.debugElement.query(By.css('ng-select'));
  }

export function triggerKeyDownEvent(element: DebugElement, which: number, key = ''): void {
  element.triggerEventHandler('keydown', {
      which: which,
      key: key,
      preventDefault: () => { },
  });
}

1 commentaires

Vous pouvez utiliser le sélecteur de variable dans le modèle et exécuter ngAfterViewInit manuellement dans votre test, mais cela peut être un peu trop détaillé à ajouter pour ajouter vos utilisations ng-select , juste pour le tester.