如何从 angular 中的 select 选项获取多个属性值

Question

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

我想发送我的场所拥有的所有属性的值，例如 'name'& 'id' 但是对于 attr 值我只能修补一个值，正确的解决方法是什么？

注意：我不希望 select 增强显示所有选项，我想从 "let venue of venues" 访问 "venue" 的所有属性。场地有 venue.name 和 venue.id，目前我可以从我的 "venue_method" 访问 venue.id 或 venue.name。如何同时访问两者？

Answer 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 您的数据才能再次创建对象。

如何从 angular 中的 select 选项获取多个属性值

How to get multiple attribute values from select options in angular

html

angular

angular-reactive-forms