如何使用选择将对象属性绑定到 Angular2 表单项

Question

我对角形有疑问。 我正在尝试创建一个使用 mongo 集合中的数据并通过 <select> 指令提供它的表单。 我有一个像这样初始化的 FormBuilder：

ngOnInit() {
    this.addForm = this.formBuilder.group({
        department_pk: ['', Validators.required],
        name_c: ['', Validators.required],
        location_fk: [],
        expirationdate_d: [],
    });
}

问题在于location_fk 属性。我正在尝试通过以下 <select> 语句填充此属性的值（我将其他表单组（对于 name_c，...）从此代码 sn-p 中删除）：

<form [formGroup]="addForm">                 
    <div class="form-group">
        <label>Location (*): </label>
        <select class="form-control" formControlName="location_fk" (ngModelChange)="onChange($event)" name="select">
              <option [ngValue]="i" *ngFor="let i of locations">{{i.name_c}}</option>
        </select>
    </div>
</form>

我设法提取了i 的值，但是，我想从集合中提取一个属性i.location_pk，同时仍然在用户可见的选择中显示i.name_c。有没有办法做到这一点？

Answer 1

你试过了吗？

<option [ngValue]="i['propName']" *ngFor="let i of locations">{{i.name_c}}</option>

或

<option [ngValue]="i.propName" *ngFor="let i of locations">{{i.name_c}}</option>