如何将 select 指令应用于 *ngFor 生成的第一个选项？

Question

我有一个 select，它的 options 是为 ngOninit 挂钩中的 HTTP 请求返回的数据生成的。

看起来像这样：

  ngOnInit() {
    this.documentosService.buscaParametros(this.request).subscribe(res => {
    this.tipoDocumento = res["general"];

  }

这是 HTML 代码：

   <select class="form-control pv-0" formControlName="tipoFactura" name="tipoFactura">    
        <option *ngFor="let documento of tipoDocumento">
          {{documento.par_deslargo01}}</option>
      </select>

如果它不是动态生成的，我可以将 selected 指令写入第一个 option 元素，但在这种情况下我不知道如何实现它。我需要在组件首次加载时第一个选项是 selected。

如何做到这一点？谢谢。

Answer 1

很简单。你可以这样做。

<select class="form-control pv-0" formControlName="tipoFactura" name="tipoFactura">    
        <option *ngFor="let documento of tipoDocumento; let i = index" [selected]="i === 0">
          {{documento.par_deslargo01}}</option>
</select>

StackBlitz

Update - Using Reacting Forms

当您使用 Angular Reactive Forms 时，您可以使用响应式表单的功能来执行您想要的操作。在您的情况下，您可以将 selected option 设置为 select，如下所示。

HTML

<form [formGroup]="myForm">
  <select formControlName="mySelect">
    <option *ngFor="let coutry of countries" [value]="coutry">{{coutry}}</option>
  </select>
</form>

TS

  countries: any = ['Sri Lanka', 'USA', 'UK', 'Australia'];
  selectedCoutry = 'Australia';

  myForm: FormGroup;

  constructor() {

    this.myForm = new FormGroup({
      mySelect: new FormControl('')
    });
  }

  ngOnInit() {
    this.myForm.get('mySelect').setValue(this.selectedCoutry);
  }

StackBlitz

Answer 2

为了回答提出的问题，ngFor 公开了许多有用的模板变量，其中有 "first" 如果您在第一项，则为 true，否则为 false：

<option *ngFor="let documento of tipoDocumento; let first" [selected]="first">
      {{documento.par_deslargo01}}</option>

最后，索引，偶数和奇数也被提供。

但是，由于您使用的是反应式表单，建议的方法是跳过所有这些并设置表单控件值：

ngOnInit() {
  this.documentosService.buscaParametros(this.request).subscribe(res => {
    this.tipoDocumento = res["general"];
    this.form.get('tipoFactura').setValue(this.tipoDocumento[0].par_deslargo01)
    // not sure what your form variable really is
  }
}

这将自动 select 您的选项列表中的那个值

如何将 select 指令应用于 *ngFor 生成的第一个选项？

how can I apply the select directive to the first option generated by a *ngFor?

angular

typescript

angular2-forms

ngfor