如何从角度中的选择选项中获取多个属性值答案

【问题标题】：How to get multiple attribute values from select options in angular如何从角度中的选择选项中获取多个属性值
【发布时间】：2018-08-10 20:14:21
【问题描述】：

html

 <select class="form-control" id="venue" name="venue1"
 formGroupName="venue" 
  (change)="venue_method($event.target.value)">
    <option hidden >Click to choose a venue...</option>
    <option [attr.value]="venue.id" *ngFor="let venue of venues"> 
       {{venue.name}}
     </option>
    <input type="hidden" formControlName="title" name="title">
  </select>

组件代码

this.rForm = fb.group({
    'venue': fb.group({
        'VenueId': [],
        'title': [],
        'isAvailable': [],
        //some more values
    }),
//some other controls and groups

});

venue_method(input: any) {
 console.log(input)
this.rForm.get('venue').patchValue({ title: input.name });
this.rForm.get('venue').patchValue({ VenueId: input.id });
this.rForm.get('venue').patchValue({isAvailable: true });
//some more patches
console.log(this.rForm.get('venue').value);
}

我想发送我的场地拥有的所有属性的值，例如“名称”和“id”，但使用 attr 值我只能修补一个值，什么是正确的解决方法？

注意：我不想选择增强来显示所有选项，我想从“让场地的场地”访问“场地”的所有属性。场地有一个场地.name 和场地.id，目前我可以从我的“场地方法”访问场地.id 或场地.名称。如何同时访问？

【问题讨论】：

在您的选择中使用 multi。只要我记得，它就会为您提供选定值的数组。 stackoverflow.com/questions/43666147/…

标签： angular html angular-reactive-forms

【解决方案1】：

您需要稍微更新您的代码，如下所示。将您的
<option [attr.value]="venue.id" *ngFor="let venue of venues"> 更新为

<option value="venue | json" *ngFor="let venue of venues"> 

 <select class="form-control" id="venue" name="venue1"
 formGroupName="venue" 
  (change)="venue_method($event.target.value)">
    <option hidden >Click to choose a venue...</option>
    <option value="venue | json" *ngFor="let venue of venues"> 
       {{venue.name}}
     </option>
    <input type="hidden" formControlName="title" name="title">
  </select>

在 TS 中你需要parse你的数据才能再次创建对象。

【讨论】：