Почему Angular 8 требуемая проверка ведет себя иначе с ngValue?

Question

У меня есть выбор, определенный как

        <select class="form-control" formControlName="gasDistributionUtilityId">
          <option [ngValue]="null">
            -- Select a name --
          </option>
          <option *ngFor="let lookup of gasDistributionUtilities"
                  [ngValue]="lookup.value">
            {{lookup.label}}
          </option>
        </select>

Одно из значений в gasDistributionUtilities равно 0, чтобы указать None. Если я связываю опцию с [value]="lookup.value", запись None не проходит требуемую проверку, потому что значение, используемое для проверки, равно нулю. Связывание с [ngValue]="lookup.value" работает как положено. Все значения являются числами, почему 0 обрабатывается по-разному? Или я не должен смешивать [value] и [ngValue] для вариантов?

Answer 1

Постоянство опции в памяти

Когда значение <option> назначено [ngValue]="value", значение сохраняется в свойстве

_optionMap: Map<string, any>

, где ключ - индекс опциона. Поэтому, если у вас есть это, выберите:

<select>
  <option [value]="10"></option>
  <option [ngValue]="20"></option>
  <option [value]="30"></option>
  <option [ngValue]="40"></option>
</select>

У вас будет _optionMap из:

[ "1", 20 ],
[ "3", 40 ]

Сохранение параметра в HTML

Эти параметры сохраняются в значении HTML как value="{index}: {value}".

Параметры, заданные с помощью [value], сохраняются в HTML в виде простых строковых значений.

Поиск выбранной опции

При извлечении значения значение HTML делится на :, и бит перед двоеточием используется в качестве ключа для извлечения возможных значений из _optionMap.

Так что если у вас есть следующее HTML:

<option [ngValue]="null"></option>
<option [value]="0"></option>

_optionMap будет выглядеть следующим образом:

["0", null]

И значение 0 будет рассматриваться как ключ "0", для значение null будет найдено на карте.

Заключение

Безопаснее выбрать один из [ngValue] или [value] для работы в любом заданном <select>. Особенно, если у вас есть цифры c.

Документы в лучшем случае неоднозначны, когда речь идет об указании обстоятельств, при которых следует использовать входные данные.

@ Input () ngValue: любой Отслеживает значение, связанное с элементом option. В отличие от привязки значения, ngValue поддерживает привязку к объектам.

@ Input () value: любая Отслеживает простые строковые значения, связанные с элементом option. Для объектов используйте привязку ввода ngValue.

Они подразумевают, что вы можете смешивать и сопоставлять входы в пределах одного <select>, не задумываясь об этом. Если у вас [value]="someNumber", у вас могут возникнуть проблемы при объединении с [ngValue].

. В приведенном ниже примере никогда не будут выбраны значения 0 или 2, поскольку они конфликтуют с * 1067. * indexes:

<select [(ngModel)]="model" (ngModelChange)="onModelChange()">
  <option [ngValue]="10">10</option>
  <option [value]="0">0</option>
  <option [ngValue]="20">20</option>
  <option [value]="2">2</option>
</select>

DEMO

Я понял это, создав игровую площадку с раздвоенной версией ngValue: https://stackblitz.com/edit/angular-hzx7cj

ngValue исходный код: https://github.com/angular/angular/blob/master/packages/forms/src/directives/select_control_value_accessor.ts