Question

我正在使用[（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>

我的inputsservice打字稿文件显示在相关部分：

ohioReporter: string

setOhioReporter(ohioReporter) {
    this.ohioReporter = ohioReporter
}

输入代码工作正常，但是无论第一个选项的值如何，选择项都会显示一个空框。我希望该解决方案仅保留在html代码中，而不需要任何打字稿代码。

Answer 1

尝试在ts / Service中尝试此操作，也许是因为默认情况下未定义

   ohioReporter: string = ""

Answer 2

您需要通过以下方式修改您的代码：

 <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;
}

使用[（ngModel）]并具有一个空的选择元素

2 个答案: