角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"];
}
}
感谢您的帮助!
在模型驱动的模板,你必须先创建表单模型。您将有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: ''
})
}
}
第一个'选项'默认选中,但不显示。如果你想显示你必须在'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
看来你刚刚启动了一个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"];
}
你能更精确地描述你的问题吗? “不起作用”是什么意思?控制台中是否有错误?你的TS文件没有完成 - 这也可能是错误的根源,因为你将'undefined'绑定到'[formGroup]'('weatherSelect'在类中不存在)。 –