Возможно ли не иметь предварительно выбранную запись в select в angular ivy - PullRequest
Новая
       72

Возможно ли не иметь предварительно выбранную запись в select в angular ivy

1 голос
/ 27 января 2020

В моем приложении angular я использую элемент управления select для пользователей, чтобы сделать выбор, заполнив опцию в * ngFor l oop. Для первого вызова (или до тех пор, пока пользователи не установят фактическое значение) выбор будет пустым, как только выбор будет сделан, они могут изменить значение, но не смогут установить его обратно на «пустой». Вот как он был спроектирован и работает до angular 8.

До нг 8 мой код выглядел так, не имея предварительно выбранной записи в элементе управления выбора, пока someValue пусто: 

<select [value]="someValue" (change)="onSelectionDataChanged($event.target.value)">
  <option *ngFor="let option of options" [value]="option"> {{ option }} <option>
</select>

С ivy больше нельзя использовать <select [value]=...> вместе с <option *ngFor=...> (см. https://angular.io/guide/ivy-compatibility-examples#select -value-binding ), но представленное там решение всегда выбирает первую запись, даже если someData опорожнить. Это имеет два недостатка: 1. Дисплей подразумевает, что первая запись была выбрана, что не соответствует действительности, и 2. чтобы фактически выбрать первую запись (и сохранить выбор для использования в бэкэнде), пользователь теперь должен сначала выбрать вторую запись. и затем выберите 1-ую запись.

Модифицированный код (как предложено в angular guilde) выглядит следующим образом: 

<select (change)="onSelectionDataChanged($event.target.value)">
  <option *ngFor="let option of options" [value]="option" [selected]="option === someValue"> {{ option }} <option>
</select>

Обходной путь - добавить пустую строку в массив опций но это позволяет пользователям полностью удалить свой выбор.

Есть ли способ иметь выбор с пустым предварительным выбором в ivy?

1 Ответ

1 голос
/ 28 января 2020

Ответ { ссылка } помог мне:

просто добавьте опцию со скрытым и отключенным набором: 

<select (change)="onSelectionDataChanged($event.target.value)">
  <option hidden disabled [selected]="!someValue" value=""></option>
  <option *ngFor="let option of options" [value]="option" [selected]="option === someValue"> {{ option }} <option>
</select>
...