角2选择下拉菜单不显示选项

我想实现角2中的选择菜单，但下拉菜单不显示任何东西。下面是在HTML代码：角2选择下拉菜单不显示选项

<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 implements OnInit{ 

    mycities: string[]; 

    constructor(private formBuilder: FormBuilder) { } 

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

}

感谢您的帮助！

来源

2017-08-12 chawin

你能更精确地描述你的问题吗？ “不起作用”是什么意思？控制台中是否有错误？你的TS文件没有完成 - 这也可能是错误的根源，因为你将'undefined'绑定到'[formGroup]'（'weatherSelect'在类中不存在）。 –

在模型驱动的模板，你必须先创建表单模型。您将有formGroup与weatherSelect和里面会有表单控件与city名称

代码

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: '' 
    }) 
    } 
}

Preview

来源

2017-08-12 12:10:53

第一个'选项'默认选中，但不显示。如果你想显示你必须在'group'中设置的值，那么键'city'like的值：city：this.mycities [0] –

请参阅plunker https://plnkr.co/edit/TrhHIFQfius6ZG3u48aN?p=info

@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"]; 
    } 
}

编辑：请注意，我已经删除所有无功东西一样formGroup和formControlName

来源

2017-08-12 12:04:10 Nodarii

看来你刚刚启动了一个ReactiveForm - learn more about ReactiveForm，但你必须很长的路要走。你需要了解很多反应形式的东西。

您有一个reactiveForm，其中FormGroup具有不同的FormControls，它们不是在您的案例中创建的。在（Angular2/4/5）中有很多方法可以处理表格。你也许可以继续使用基本，这是，

DEMO：https://plnkr.co/edit/83dltzJmDI6mgFiam2b0?p=preview

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"]; 
    }

来源

2017-08-12 12:27:53 micronyks

角2选择下拉菜单不显示选项

回答

相关问题