Как установить выберите значение параметра в нуль в угловых 2

Question

У меня есть следующий код:

<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> 

и в машинописном:

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

Он просто не похож на правильный путь, чтобы сделать Это. Есть ли другой менее верный способ получить параметр по умолчанию со значением null (не «null»)? Я не могу поместить параметр по умолчанию в массив категорий, так как это испортит другой код. И я не против ngModelChange, так как мне нужно запустить собственный код при выборе. Это просто часть $event && $event != 'null' ? $event: null, которую я хотел бы очистить.

Невозможно использовать [ngValue] по умолчанию; он просто дает мне значение 0: null (строка). И пропустить значение настройки приводит к привязке selectedCategory=null, чтобы не соответствовать параметру по умолчанию, оставляя поле со списком невыбранным в init.

Answer 1

На данный момент для этого используется open issue in the github repository.

Я нашел, что это можно использовать для достижения того же, что у вас есть, но с немного меньшим количеством кода. Он также предполагает, что вы не используете пустую строку в качестве возможного значения, но если вы просто немного измените ее, чтобы принять это во внимание в условном выражении.

Посмотреть

<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> 

компонентов нет дополнительной логики требуется

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

Если вы еще хотели do stuff (со ссылкой на свой образец кода) по изменению модели, то метод подход вам было бы лучше, но если бы все, что вы хотели сделать, это установить значение в действительную категорию или null Если бы ни одна категория не была выбрана, это уменьшило бы количество кода.

Answer 2

Хотя решение Igors не работает совсем подходит для меня, вот что я использую:

<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) 
    { 
     // ... 
    } 
} 

Там две важные детали, чтобы рассмотреть здесь:

1. В шаблоне сделать ваш вариант по умолчанию использует null как ngModel, например: [ngValue]="null". Это необходимо для привязки нулевого параметра.
2. Обязательно назначьте selectedItem в компоненте null, в противном случае это не определено, и ваш select будет отображаться как пустой/не имеющий выбор по умолчанию.