Angular 角度2选择下拉列表不显示选项

我试图在angular 2中实现一个选择菜单，但下拉菜单没有显示任何内容。以下是HTML的代码：

<form [formGroup]="weatherSelect" (ngSubmit)="onsubmit(weatherSelect)">
    <div class="form-group">
        <label for='city'>Singapore Cities</label>
        <select class="form-control" formControlName="city" id="cities">
            <option *ngFor="let c of mycities" [value]="c">{{c}}</option>
        </select>
    </div>
</form>

谢谢你的帮助

请参见plunker

---

编辑：请注意，我已经删除了模型驱动模板中的所有被动内容，如formGroup和formControlName，您必须首先创建表单模型。您将拥有带有weatherSelect的formGroup，其中将包含带有城市名称的form控件

代码

---

看来你刚刚发起了一场革命，但你还有很长的路要走。你需要以反应的形式理解很多事情

您有一个reactiveForm，其中FormGroup有不同的FormControls，这些控件不是在您的案例中创建的。 在Angular2/4/5中有许多处理表单的方法。你可以继续做基本的，这是

演示：

---

你能更准确地描述你的问题吗？什么是不工作？控制台中是否有错误？您的TS文件未完成-这也可能是错误的原因，因为类中不存在将未定义绑定到[formGroup]weatherSelect的选项。默认情况下，第一个选项已选中，但未显示。如果要显示值，必须在组中设置键citylike:city:this.mycities[0]的值

export class AppComponent implements OnInit{

  mycities: string[]; 

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.mycities = ["city1", "city2", "city3"];
  }

}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <form (ngSubmit)="onsubmit(weatherSelect)">
        <div class="form-group">
            <label for='city'>Singapore Cities</label>
            <select class="form-control" formControlName="city" id="cities">
                <option *ngFor="let c of mycities" [value]="c">{{c}}</option>
            </select>
        </div>
      </form>
    </div>
  `,
})
export class App implements OnInit{
  name:string;
  constructor(private formBuilder: FormBuilder) {
    this.name = `Angular! v${VERSION.full}`
  }
  ngOnInit() {
    this.mycities = ["city1", "city2", "city3"];
  }
}

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <form [formGroup]="weatherSelect" (ngSubmit)="onsubmit(weatherSelect)">
        <div class="form-group">
            <label for='city'>Singapore Cities</label>
            <select class="form-control" formControlName="city" id="cities">
                <option *ngFor="let c of mycities" [value]="c">{{c}}</option>
            </select>
        </div>
    </form>
  `
})
export class AppComponent { 
  mycities: string[]; 
  weatherSelect: FormGroup; 
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.mycities = ["city1", "city2", "city3"];
    this.weatherSelect = this.formBuilder.group({
      city: ''
    })
  }
}

constructor(private formBuilder: FormBuilder) { 
     this.weatherSelect = new FormGroup ({
        city: new FormControl(),
        //pincode: new FormControl('456004') // second FormControl, look at plunker
    });
  }

  ngOnInit() {
    this.mycities = ["city1", "city2", "city3"];
  }