Angular2 select with ngValue null

Question

Вот что я пытаюсь сделать: я хочу, чтобы список выбора привязывался к массиву объектов с ngValue, но первым вариантом должен быть параметр «Нет» с значением null.

Модель:

this.managers = [ 
    { id: null, name: "(None)" }, 
    { id: 1, name: "Jeffrey" }, 
    { id: 2, name: "Walter" }, 
    { id: 3, name: "Donnie" } 
    ]; 

this.employee = { 
    name: "Maude", 
    managerId: null 
}; 

Вид:

<select [(ngModel)]="employee.managerId"> 
    <option *ngFor="#manager of managers" [ngValue]="manager.id">{{ manager.name }}</option> 
    </select> 

При загрузке списка правильно связывается с элементом "None". Но если вы перейдете на другой элемент и обратно, значение модели теперь переключится на строку 0: null. Это довольно неудобно; это означает, что я должен перехватить значение и изменить его на нуль вручную, прежде чем пытаться сохранить его на сервере.

Вот Plunker с демо: http://plnkr.co/edit/BH96RWZmvbbO63ZAxgNX?p=preview

Это было довольно легко сделать в угловых 1 с дополнительной <option value="">None</option>

Это кажется, что это будет довольно распространенный сценарий, и все же я не смог найти любые решения. Я также попытался добавить <option [ngModel]="null">None</option>, но это приводит к тому же значению 0: null.

Любые предложения?

Answer 1

Для меня это действительно похоже на ошибку, но если вы ищете быстрое решение, вы можете просто преобразовать null идентификатор в string. Он должен решить проблему, но вы должны сделать некоторые дополнительные шаги для выполнения этой работы.

См пример Plnkr example

Или, если вы собираетесь сделать это так, как вы упоминаете от NG1, вы можете сделать так: Plnkr example

Я знаю, что это не лучшее решение, но надежда поможет вам до того, как эта ошибка будет исправлена ​​командой NG!

• https://github.com/angular/angular/issues/10349
• https://github.com/angular/angular/pull/12026

Answer 2

Вместо строку «нулевой» Я создал пустой объект для сравнения, чтобы позже в моей машинописи.

В компоненте:

blankObject = { 
    toString() { 
     return 'blank object'; 
    } 
}; 

isBlank() { 
    return this.filter.searchValue == null || this.filter.searchValue === this.blankObject; 
} 

В шаблоне:

<select [(ngModel)]="filter.searchValue"> 
    <option [ngValue]="blankObject"></option> 
    <option *ngFor="let item of filter.selectOptions" [ngValue]="item.value"> 
       {{item.label}} 
    </option> 
</select>` 

Answer 3

Я перенаправляет вас Reddit ответ TabascoMustang, я реализовать свое решение и работать великолепный:

TabascoMustang's reddit answer

это должно работать (обновлено для текущего NG2 гса):

<select [ngModel]="audit.managerId || ''" (ngModelChange)="audit.managerId = $event"> 
    <option value="">Please Select</option> 
    <option *ngFor="let contact of audit.contacts">{{ contact.name }} 
    </option> 
</select> 

Answer 4

Изменить [ngValue] только [значение]

Answer 5

В настоящее время существует open issue in the github repository для этого.

Как работа, которую я нашел, добавление ngModelChange - это самый простой способ установить значение null в представлении без необходимости добавлять что-либо к компоненту.

Вид:

<select [(ngModel)]="employee.managerId" 
     (ngModelChange)="employee.managerId = $event ? $event : null"> 
    <option *ngFor="#manager of managers" [value]="manager.id">{{ manager.name }}</option> 
</select> 

отмечают, что ngValue теперь value