Как получить несколько значений атрибутов из параметров выбора в angular

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.info(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.info(this.rForm.get('venue').value);
}

Я хочу отправить значение всех свойств, которые есть у моей площадки, например, 'name' и 'id', но со значением attr я могу исправить только одно значение. Каков правильный обходной путь для этого?

Примечание. Я не хочу, чтобы при выборе расширенного отображения отображались все варианты, я хочу получить доступ ко всем свойствам «место проведения» из «разрешить место проведения мероприятий». У места проведения есть место проведения. Имя и место проведения. В настоящее время я могу получить доступ к месту проведения. как получить доступ к обоим одновременно?

используйте multi внутри вашего выбора. Насколько я помню, он выдаст вам массив выбранных значений. stackoverflow.com/questions/43666147/…

omurbek 10.08.2018 13:41
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
1
315
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 ваших данных, чтобы снова создать объект.

Другие вопросы по теме