web-dev-qa-db-fra.com

Comment définir la valeur de l'option de sélection sur null dans Angular 2

J'ai le balisage suivant:

<select [ngModel]="selectedCategory" 
     (ngModelChange)="selectCategory($event && $event != 'null' ? $event : null)">

  <option [value]="null">(all categories)</option>
  <option *ngFor="let cat of categories" [ngValue]="cat">{{cat.name}}</option>

</select>

et en TypeScript:

export class MyComp {
    public categories: Category[];
    public selectedCategory: Category;
    public selectCategory(cat: Category) {
        this.selectedCategory = cat;
        doStuff();
    }
}

Cela ne ressemble tout simplement pas à la bonne façon de procéder. Existe-t-il un autre moyen moins détaillé pour obtenir une option par défaut avec une valeur nulle (et non 'nulle')? Je ne peux pas mettre l'option par défaut dans le tableau des catégories car cela gâcherait un autre code. Et cela ne me dérange pas le ngModelChange car j'ai besoin d'exécuter du code personnalisé sur la sélection. C'est juste le $event && $event != 'null' ? $event: null partie que je voudrais nettoyer.

Je ne peux pas utiliser [ngValue] sur les options par défaut; ça me donne juste une valeur de 0: null (chaîne). Et ignorer la valeur de réglage entraîne une liaison selectedCategory=null ne correspond pas à l'option par défaut en laissant la zone de liste déroulante désélectionnée à l'initialisation.

angularangular2-template
10
maloo

Bien que la solution Igors ne fonctionne pas tout à fait pour moi, voici ce que j'utilise:

<select [ngModel]="selectedItem" (ngModelChange)="selectItem($event)">
    <option [ngValue]="null">Don't show</option>
    <option *ngFor="let item of items" [ngValue]="item">{{item.text}}</option>
</select>

import { Component, Input } from '@angular/core';
@Component()
export class SelectionComponent {
    @Input() items: any[];
    selectedItem: any = null;
    selectItem(item?: any)
    {
        // ...
    }
}

Il y a deux détails importants à considérer ici:

  1. Dans le modèle, faites en sorte que votre option par défaut utilise null comme ngModel, comme ceci: [ngValue]="null". Il s'agit de lier une option nulle.
  2. Assurez-vous d'affecter le selectedItem dans le composant null, sinon il n'est pas défini et votre select s'affichera comme vide/n'a pas la sélection par défaut.
14
GeorgDangl

Pour l'instant il y a un problème ouvert dans le dépôt github pour cela.

J'ai trouvé que cela peut être utilisé pour obtenir la même chose que vous, mais avec un peu moins de code. Il suppose également que vous n'utilisez pas de chaîne vide comme valeur possible, mais si vous la modifiez juste légèrement pour en tenir compte dans l'instruction conditionnelle.

Vue

<select [ngModel]="selectedCategory" 
        (ngModelChange)="selectedCategory = $event ? $event : null">
  <option value="">(all categories)</option>
  <option *ngFor="let cat of categories" [ngValue]="cat">{{cat.name}}</option>
</select>

Composant aucune logique supplémentaire requise

export class MyComp {
    public categories: Category[];
    public selectedCategory: Category;
}

Si vous vouliez toujours do stuff ( se référant à votre exemple de code) lors du changement de modèle, alors l'approche de méthode que vous avez serait mieux adaptée, mais si tout ce que vous vouliez faire était de définir la valeur sur une catégorie valide ou null si aucune catégorie n'était sélectionnée, cela réduirait le code.

2
Igor

utilisez simplement [value]="undefined"

<select class="form-control" [(ngModel)]="selectedCategory">
    <option [value]="undefined" disabled hidden>Select...</option>
    <option *ngFor="let c of categories">{{c}}</option>
</select>
1
Matt