Angular2 - 在選擇項顯示值

我是很新，角/ Webdev的（我來自一個移動背景），所以請容忍我在這裏...Angular2 - 在選擇項顯示值

我試圖顯示狀態的縮寫在「選擇」菜單項中。我有一個client-detail-componenet.ts文件，這是在我的狀態的縮寫的數組：

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']; 
... 
}

在相應的HTML文件，我有以下代碼，我打算把一個下拉選擇一種形式的內部：

  <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>

這有些部分是不正確的，因爲當我運行項目並查看菜單時，選擇器中沒有顯示選項值。任何人都可以幫助我理解我需要做什麼嗎？謝謝！

編輯正如亞歷山大指出，有一個在HTML文件中的錯字......校正線低於：

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

不過，我仍然沒有看到任何值顯示在選擇器：

編輯2

這是其中創建表單組+它的元素：

// 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 

    });

來源

2017-08-10 narner

你是通過類似FormBuilder的東西初始化FormControl中的每一個，包括'state'嗎？ –

正如你在這個plunk中看到的：https://embed.plnkr.co/s2quKKVhsYm0NTL6k9Ib/，在* ngFor語法中沒有錯誤，所以問題在於別處。嘗試包括您的FormControl代碼+ CSS，也許我們可以提供更好的幫助。 – LarsMonty

@AlexanderStaroselsky謝謝;這是有道理的 - 我添加了另一個編輯問題w /代碼 – narner

在<option *ngFor="let state of states" [value]="state">{{states}}</option>你有{{states}}後面帶有一個「S」字符，而不是僅僅{{state}}。

嘗試刪除尾部「s」以顯示/目標當前迭代的state字符串值。

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

確保您是通過什麼初始化每個FormControl像在構造FormBuilder：

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>

希望有幫助！

來源

2017-08-10 18:05:20

嗨，亞歷山大，感謝你的錯字 - 它仍然表現怪異。我會盡快更新我的答案（帶有屏幕截圖和這種錯字修正）。 – narner

幫了很大忙 - 謝謝！ – narner

Angular2 - 在選擇項顯示值

回答

相關問題