Использование [(ngModel)] и наличие пустого элемента select

Question

Я использую [(ngModel)] top bind различных входных данных и выбираю элементы в моем угловом приложении. Я также использую сервис с ngModel. При использовании элемента select мое приложение показывает пустую опцию.

Даже если я изменю значение первой опции на что-то отличное от пустой строки, возникнет та же проблема.

<div>
  <input 
    placeholder="Ohio Volume"
    type="number"
    class="text-input"
    value="{{ this.inputsService.ohioVolume }}"
    [(ngModel)]="ohioVolume"
    (change)="this.inputsService.setOhioVolume(ohioVolume)"
  >
</div>
<div>
  <select
    class="select" 
    value="{{ this.inputsService.ohioReporter }}"
    [(ngModel)]="ohioReporter"
    (change)="this.inputsService.setOhioReporter(ohioReporter)">
    <option value="">Ohio Reporter</option>
    <option value="Ohio St.3d">Ohio St.3d</option>
    <option value="Ohio St.2d">Ohio St.2d</option>
    <option value="Ohio St.">Ohio St.</option>
  </select>
</div>

Мой машинописный файл inputService показан в соответствующей части:

ohioReporter: string

setOhioReporter(ohioReporter) {
    this.ohioReporter = ohioReporter
}

Код ввода работает должным образом, но выбор показывает пустое поле независимо от значения первого параметра. Я бы предпочел, чтобы решение оставалось только в HTML-коде и не требовало никакого машинописного кода.

Answer 1

Вам нужно изменить свой код следующим образом:

 <select
    class="select" 
    value="{{ this.inputsService.ohioReporter }}"
formControlName="name" [ngModel]="ohioReporter" name="ohioReporter" (ngModelChange)="ohioReporter($event)">
    <option value="">Ohio Reporter</option>
    <option value="Ohio St.3d">Ohio St.3d</option>
    <option value="Ohio St.2d">Ohio St.2d</option>
    <option value="Ohio St.">Ohio St.</option>
  </select>

.ts стал:

@Output() ohioReporter: number;

....
  ohioReporter(ohioReporter) {

    this.ohioReporter= ohioReporter;
}

Answer 2

Попробуйте с этим в вашей TS /Service, может быть, потому что он не определен по умолчанию

   ohioReporter: string = ""