Angular2 выберите с ngValue null

Вот что я пытаюсь сделать: я хочу, чтобы список выбора привязывался к массиву объектов с помощью 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>

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

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

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

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

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

Ответы

Ответ 1

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

См. пример Пример Plnkr

Или, если вы собираетесь это сделать так, как вы указываете в ng1,  вы можете сделать следующее: Пример Plnkr

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

Ответ 2

Я перенаправляю вас на ответ TarascoMustang reddit, я реализую его решение и прекрасно работаю:

ТабаскоМустанг reddit answer

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

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

Ответ 3

На данный момент существует открытая проблема в репозитории github.

В качестве работы я обнаружил, что добавление 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

Ответ 4

Вместо строки "null" я создал пустой объект для сравнения с последним в моем TypeScript.

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

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

Ответ 5

Измените [ngValue] на просто [значение]