0

我正在使用 [(ngModel)] 顶部绑定各种输入并在我的角度应用程序中选择元素。我还使用 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 代码中,不需要任何打字稿代码。

4

2 回答 2

0

您需要以这种方式修改您的代码:

 <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;
}
于 2019-05-24T12:42:23.087 回答
0

在您的 ts/Service 中尝试使用此功能,可能是因为默认情况下未定义

   ohioReporter: string = ""
于 2019-05-24T12:35:34.137 回答