Angular2 - 選択した項目の値を表示

Question

は、私は（私は、モバイル背景から来る）/ WebDevを角度にかなり新しいので、私は状態の略語を表示しようとしている...ここに私と一緒に

を負担します「選択」メニュー項目で選択します。

：私はフォームの内部ドロップダウンセレクタを配置する予定の次のコードを持っている、対応するHTMLファイルで

export class ClientDetailComponent implements OnInit, OnDestroy { 
private showDebugInfo: boolean; 
private clientDataFG: FormGroup; 
private clientDataFGFormVal: AppFormValidationResult; 
private brapClient: BrapClient; 

//TODO - this should be created somewhere else... 
states = ['AL', 'AK', 'AS', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FM', 'FL', 'GA', 'GU', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MH', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'MP', 'OH', 'OK', 'OR', 'PW', 'PA', 'PR', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VI', 'VA', 'WA', 'WV', 'WI', 'WY']; 
... 
} 

：私は状態の略語の配列を有する場合であるclient-detail-componenet.tsファイルを持っています

  <div class="field-area"> 

       <label for="state" class="text-center">State</label> 
       <!--<div class="field state"> 
        <input type="text" id="addressState" class="form-control" formControlName="addressState"> 
       </div>--> 

       <select class="form-control" formControlName="state"> 
        <option *ngFor="let state of states" [value]="state">{{states}}</option> 
       </select> 
       </div> 

プロジェクトを実行してメニューを見ると、セレクタにオプション値が表示されないため、一部の部分が正しくありません。誰でも私が何をする必要があるのか​​理解できるように助けることができますか？ありがとう！

EDITアレクサンダーが指摘したように、HTMLファイルにタイプミスがあった...修正ラインは以下の通りです：

<option *ngFor="let state of states" [value]="state">{{state}}</option>

しかし、私はまだ任意の値が表示さ見ていませんよセレクタに：

EDIT 2

でありますフォームグループ+それの要素が作成される場所：<option *ngFor="let state of states" [value]="state">{{states}}</option>で

// This creates the initial form for the page, as well as the validation objects. 
createForm() { 
    this.clientDataFG = this.fb.group({ 
     firstName: [null, Validators.required], 
     lastName: [null, Validators.required], 
     emailAddress: [null], 
     homePhone: [null], 
     addressStreet1: [null], 
     addressCity: [null], 
     addressState: [null], 
     addressZip: [null], 
     weight: [null], 
     height: [null], 
     riderType: [null], 
     clientBikes: this.fb.array([]), // <-- clientBikes is as an empty FormArray 

    }); 

Answer 1

あなたは、末尾いうだけで{{state}}よりも「S」の文字と{{states}}を持っています。

現在の反復のstate文字列値を表示/ターゲットにするために、末尾の "s"を削除してみてください。

<option *ngFor="let state of states" [value]="state">{{state}}</option> 

あなたは、コンストラクタでFormBuilderのようなものを介してFormControlを初期化していることを確認します：

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

export class ClientDetailComponent implements OnInit, OnDestroy { 
    states: string[] = ['AL']; 

    constructor(private fb: FormBuilder) { 
     this.clientDataFG = this.fb.group({ 
      state: 'AL' 
     }); 
    } 
} 

あなたはaddressStateとして識別FormControlを初期化されますが、テンプレート内stateを使用しています。 formControlName="state"をformControlName="addressState"に変更してみてください。

<select class="form-control" formControlName="addressState"> 
    <option *ngFor="let state of states" [value]="state">{{state}}</option> 
</select> 

うまくいけば助けてください！