角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選擇下拉菜單不顯示選項

回答

相關問題