Angular2 - 在 Select 项中显示值

Question

我是 Angular/WebDev 的新手（我有移动背景），所以请多多包涵...

我正在尝试在 "Select" 菜单项中显示州缩写。我有一个 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

    });

Answer 1

在 <option *ngFor="let state of states" [value]="state">{{states}}</option> 中，您有 {{states}} 尾随 "s" 字符，而不仅仅是 {{state}}.

尝试删除尾随 "s" 到 display/target 当前迭代的 state 字符串值。

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

希望对您有所帮助！

Angular2 - 在 Select 项中显示值

Angular2 - Displaying values in a Select item

javascript

html

angular

angular-reactive-forms