如何使用ngFor选择第一个选项？

问题描述

我正在尝试在用户输入电子邮件后选择第一个选项，但保持未选中状态。 有解决办法吗？

image here

HTML：

<label for="login"><b>Usuário:</b></label>
                <input type="email" id="login" name="login" ngModel class="form-control" placeholder="E-mail"
                    required autofocus (focusout)="onSelect()">

 <label><b>Empresa:</b></label>
                <select ngModel name="IdEmpresa" class="form-control" id="IdEmpresa" disabled="{{ disabled }}">
                    <option *ngFor="let empresa of empresas; index as i" value="{{empresa.id}}"
                    >{{ empresa.nome }}</option>
                </select>

TS：

onSelect() {
if ($("#login").val()== null || $("#login").val() =="") {

} else {
  this.erro = false;
  this.alertService.clear();

  let email = (document.getElementById("login") as HTMLInputElement).value;
  localStorage.setItem(constants.emailSafeguard,email);

  this.service.getEmpresas(email).subscribe(lista => {
    this.empresas = lista;

    if(lista.length > 1) {
      this.disabled = false;
    } else {
      this.disabled = true;
    }
  })
}

}

解决方法

您的选择没有价值。请像这样更改它：

<select [(ngModel)]="selectedEmpresaId" name="IdEmpresa" class="form-control" id="IdEmpresa" [disabled]="disabled">
                    <option *ngFor="let empresa of empresas; index as i" [value]="empresa.id"
                    >{{ empresa.nome }}</option>
                </select>

并且以ts（初始）

this.selectedEmpresaId = this.empresas[0].id;

---

或者使用对象而不是id

<select [(ngModel)]="selectedEmpresa" name="IdEmpresa" class="form-control" id="IdEmpresa" [disabled]="disabled">
                    <option *ngFor="let empresa of empresas; index as i" [value]="empresa"
                    >{{ empresa.nome }}</option>
                </select>

并且以ts（初始）

this.selectedEmpresa = this.empresas[0];