Angular 9: Как удалить пустую опцию из выбора - PullRequest
Новая
       5

Angular 9: Как удалить пустую опцию из выбора

1 голос
/ 21 апреля 2020

Я использую angular 9, строю выпадающий список с некоторыми опциями. Я пытаюсь установить значение по умолчанию, но при загрузке страницы в раскрывающемся списке есть пустая опция. Как я могу удалить эту пустую опцию?

Это то, что у меня сейчас есть: 

<form #f="ngForm">
  <select aria-labelledby="dropdownMenuButton" [(ngModel)]="selectedValue" (change)="hideShowElements($event.target.value)">
    <option [ngValue]="null">Show All</option>
    <option *ngFor="let item of response.results | filterUnique;" [ngValue]="item.section">{{item.section}}</option>
  </select>
</form>

Спасибо!

1 Ответ

1 голос
/ 21 апреля 2020

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

  • Это не то же самое, что использование undefined, это приведет к пустому значению в элементе select.
  • Если вам присвоено значение, которое не содержится в качестве возможного параметра, тогда отображаемая опция также будет пустой / пустой. Пример: у вас есть диапазон от 1 до 5, но текущее значение selectedValue равно 6.

app.component.ts 

export class AppComponent  {
  selectedValue: number = null;
  selectedValue2: number;
}

приложение. html

<h3>Example with an assignment to null<h3>
<select aria-labelledby="dropdownMenuButton" [(ngModel)]="selectedValue">
  <option [ngValue]="null">Show All</option>
  <option [ngValue]="1">One</option>
  <option [ngValue]="2">Two</option>
</select>

<h3>Example with no assignment to null<h3>
<select aria-labelledby="dropdownMenuButton" [(ngModel)]="selectedValue2">
  <option [ngValue]="null">Show All</option>
  <option [ngValue]="1">One</option>
  <option [ngValue]="2">Two</option>
</select>

См. Также рабочий пример stackblitz .

...