Comment définir l'option de sélection de la valeur null dans Angulaire 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 caractères d'imprimerie:

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

Il ne ressemble pas à la façon correcte de le faire. Est-il un autre moins verbeux pour obtenir une option par défaut avec une valeur null (pas 'null')? Je ne peux pas mettre l'option par défaut dans les catégories de la matrice, puisqu'il ne serait gâcher un autre code. Et je n'ai pas l'esprit de la ngModelChange car j'ai besoin d'exécuter du code personnalisé sur la sélection. C'est juste la $event && $event != 'null' ? $event: null partie, je voudrais nettoyer.

Je ne peux pas utiliser [ngValue] sur les options par défaut; il me donne juste une valeur de 0: null (chaîne de caractères). Et ignorer la valeur de réglage de résultats dans la liaison selectedCategory=null de ne pas correspondre à la valeur par défaut de l'option de quitter la zone de liste modifiable non sélectionnés à l'initialisation.

OriginalL'auteur maloo | 2016-05-15

angular angular2-template

Tandis que les Igors solution ne fonctionne pas tout à fait bon 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:

Dans le modèle, faire de votre option par défaut utiliser null comme ngModel, comme ceci: [ngValue]="null". C'est pour lier un null.
Assurez-vous d'attribuer le selectedItem dans le composant null, sinon c'est pas défini et votre select affichera sous vide /pas la sélection par défaut.

OriginalL'auteur GeorgDangl

2

Comme de maintenant, il ya une question ouverte dans le dépôt github pour cela.

J'ai trouvé que cela peut être utilisé pour réaliser la même chose mais avec un peu moins de code. Il suppose également que vous n'utilisez pas la chaîne vide comme une valeur possible, mais si vous êtes juste de le modifier un peu pour le prendre en 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 pas de logique supplémentaire requis
```
export class MyComp {
    public categories: Category[];
    public selectedCategory: Category;
}
```
Si vous avez toujours voulu do stuff (se référant à l'exemple de code) sur le changement du modèle de la méthode de l'approche que vous avez serait mieux adapté, mais si tout ce que vous voulais faire était de définir la valeur d'une catégorie valide ou null si aucune catégorie a été sélectionnée ce serait pour moins de code.

Ce sera la cause de la liste déroulante pour sélectionner un item vide au lieu de (toutes catégories) point sur null

OriginalL'auteur Igor

Vous devez vous connecter pour publier un commentaire.