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

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

0 голосов
/ 24 мая 2019

Я использую [(ngModel)] top для привязки различных входов и выбора элементов в моем угловом приложении. Я также использую сервис с 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-коде и не требовало никакого машинописного кода.

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

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

 <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;
}
0 голосов
/ 24 мая 2019

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

   ohioReporter: string = ""
...