Angular2 - 在选择项

时间:2017-08-10 18:01:23

标签: javascript html angular angular-reactive-forms

我是Angular / WebDev的新手(我来自移动背景),所以请耐心等待......

我正在尝试在“选择”菜单项中显示状态缩写。我有一个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>

但是,我仍然没有看到选择器中显示任何值: enter image description here

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

    });

1 个答案:

答案 0 :(得分:3)

<option *ngFor="let state of states" [value]="state">{{states}}</option> {{states}}中,{{state}}有一个尾随&#34;&#34;字符而不仅仅是state

尝试删除尾随&#34;&#34;显示/定位当前迭代的<option *ngFor="let state of states" [value]="state">{{state}}</option> 字符串值。

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'
        });
    }
}

确保通过构造函数中的FormBuilder初始化每个FormControl:

addressState

您正在初始化标识为state的FormControl,但在模板中使用formControlName="state"。尝试将formControlName="addressState"更改为<select class="form-control" formControlName="addressState"> <option *ngFor="let state of states" [value]="state">{{state}}</option> </select>

#python3

applicant = input("Enter the applicant's name: ")
interviewer = input("Enter the interviewer's name: ")
time = input("Enter the appointment time: ")
print(interviewer, applicant,  time)

always show error:
TypeError: 'str' object is not callable

希望这有帮助!