代码之家 › 专栏 › 技术社区 › Luke

选择角度4不使用*ngFor在选项中工作

angular-forms ngfor html-select angular

Luke · 技术社区 · 6 年前

<option [selected]="true"> 如果同时存在ngFor,则在角度4中不工作。

模板:

<form [formGroup]='myForm'>

  <div class="col-sm-9 col-md-4">
    Not working selected, with ngFor
    <select formControlName="nationality" class="form-control">
      <option *ngFor="let elem of nationalityList" [ngValue]="elem.code" [selected]="elem.code=='ITA'">{{ elem.description}}</option>
    </select>
  </div>

  <div class="col-sm-9 col-md-4">
    Working selected, without ngFor
    <select formControlName="nationality" class="form-control">
      <option [ngValue]="nationalityList[0].code" [selected]="nationalityList[0].code=='ITA'">{{ nationalityList[0].description}}</option>
      <option [ngValue]="nationalityList[1].code" [selected]="nationalityList[1].code=='ITA'">{{ nationalityList[1].description}}</option>
    </select>
  </div>

</form>

组件:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: 'app-prova',
  templateUrl: './prova.component.html',
  styleUrls: ['./prova.component.css']
})
export class ProvaComponent implements OnInit {

  myForm:FormGroup = new FormGroup({
    nationality: new FormControl('')
  });

  nationalityList = [
    { description: 'NATIONALITY_ITALIAN', code: 'ITA' },
    { description: 'NATIONALITY_FOREIGN', code: 'EST' }
  ];

  constructor() { }

  ngOnInit() {
  }

}

输出:

所以问题是: 为什么所选内容不能与ngFor一起使用?是虫子还是我遗漏了什么?如何使其工作? 谢谢

2 回复 | 直到 6 年前

Poul Kruijt 6 年前

您不应使用“选定”,请尝试以下操作:

<form [formGroup]="myForm">
  <select formControlName="nationality" class="form-control">
    <option *ngFor="let elem of nationalityList" [ngValue]="elem.code">
      {{ elem.description}}
    </option>
  </select>
</form>

并将myForm定义更改为:

myForm:FormGroup = new FormGroup({
  nationality: new FormControl('ITA')
});

Yassine Ben Hamida 6 年前

如果这有帮助的话,我通常会为此声明一个NGmodel,并根据需要在ts文件中初始设置其值,如下所示:

   <select [(ngModel)]="myval" formControlName="nationality" class="form-control"> 
    <option *ngFor="let elem of nationalityList" [ngValue]="elem.code" [selected]="elem.code=='ITA'">{{ elem.description}}</option> 
    </select>

在我的ts文件中,我使用了:

export class ProvaComponent implements OnInit {
  myval:any; // or your type
  myForm:FormGroup = new FormGroup({
    nationality: new FormControl('')
  });

  nationalityList = [
    { description: 'NATIONALITY_ITALIAN', code: 'ITA' },
    { description: 'NATIONALITY_FOREIGN', code: 'EST' }
  ];

  constructor() { }

  ngOnInit() {
   this.myval = this.nationlaityList[0]; // for example
  }

}

可能并不总是有效,但在某些情况下确实有效