Получить значение из параметра выбора в Angular 4

Как мне получить значение из опции выбора в Angular 4?

Я хочу присвоить его новой переменной в файле component.ts. Я пробовал это, но ничего не выводит.

Можете ли вы сделать это с помощью [(ngModel)]?

component.html

<form class="form-inline" (ngSubmit)="HelloCorp(f)" #f="ngForm">
     <div class="select">
         <select class="form-control col-lg-8" #corporation required>
             <option *ngFor="let corporation of corporations" [value]="corporationObj">{{corporation.corp_name}}</option>    
         </select>
             <button type="submit" class="btn btn-primary manage">Submit</button>
     </div>
</form>

component.ts

HelloCorp() {
const corporationObj = corporation.value;
}

person Joseph    schedule 27.09.2017    source источник


Ответы (6)


Как генерал (см. Stackblitz здесь: https://stackblitz.com/edit/angular-gh2rjx ):

HTML

<select [(ngModel)]="selectedOption">
   <option *ngFor="let o of options">
      {{o.name}}
   </option>
</select>
<button (click)="print()">Click me</button>

<p>Selected option: {{ selectedOption }}</p>
<p>Button output: {{ printedOption }}</p>

Машинопись

export class AppComponent {
  selectedOption: string;
  printedOption: string;

  options = [
    { name: "option1", value: 1 },
    { name: "option2", value: 2 }
  ]
  print() {
    this.printedOption = this.selectedOption;
  }
}

В вашем конкретном случае вы можете использовать ngModel следующим образом:

<form class="form-inline" (ngSubmit)="HelloCorp()">
     <div class="select">
         <select [(ngModel)]="corporationObj" class="form-control col-lg-8" #corporation required>
             <option *ngFor="let corporation of corporations"></option>    
         </select>
         <button type="submit" class="btn btn-primary manage">Submit</button>
     </div>
</form>

HelloCorp() {
  console.log("My input: ", corporationObj);
}
person mahval    schedule 27.09.2017
comment
Это все? Нет (ngSubmit) больше? - person Joseph; 27.09.2017
comment
Да вот оно что. Вы можете использовать ngSubmit, чтобы инициировать событие, например: console.log(corporationObj), и увидеть выбранный вами ввод, но переменная corporationObj изменится немедленно, отправка не требуется. - person mahval; 27.09.2017
comment
Вы видите мои коды. Я забыл написать это {{corporation.corp_name}}. Это значения параметра. Ваш еще не определен ?? - person Joseph; 27.09.2017
comment
Мой общий пример, приведенный выше, должен сработать для вас. Если нет, убедитесь, что вы импортировали FormsModule и добавили его в массив импорта в app.module.ts. - person mahval; 27.09.2017

HTML код

    <form class="form-inline" (ngSubmit)="HelloCorp(modelName)">
        <div class="select">
            <select class="form-control col-lg-8" [(ngModel)]="modelName" required>
                <option *ngFor="let corporation of corporations" [ngValue]="corporation">
                    {{corporation.corp_name}}
                </option>    
            </select>
            <button type="submit" class="btn btn-primary manage">Submit</button>
        </div> 
    </form>

Код компонента

HelloCorp(corporation) {
    var corporationObj = corporation.value;
}
person Sujith S    schedule 14.03.2018

Вам просто нужно поместить [(ngModel)] в выбранный элемент:

<select class="form-control col-lg-8" #corporation required [(ngModel)]="selectedValue">
person Plog    schedule 27.09.2017
comment
А как можно присвоить значение в component.ts? - person Joseph; 27.09.2017

На самом деле это очень просто.

Обратите внимание, что я

I. добавив name = "selectedCorp" в открывающий тег select, и

II. измените значение [value] = "corporationObj" на [value] = "corporation", что согласуется с корпорацией в вашем * ngFor = Заявление "пусть корпорация корпораций":

 <form class="form-inline" (ngSubmit)="HelloCorp(f)" #f="ngForm">
   <div class="select">
     <select class="form-control col-lg-8" #corporation name="selectedCorp" required>
       <option *ngFor="let corporation of corporations" [value]="corporation">{{corporation.corp_name}}</option>
     </select>
     <button type="submit" class="btn btn-primary manage">Submit</button>
   </div>
 </form>

А затем в вашем файле .ts вы просто делаете следующее:

HelloCorp(form: NgForm) {
   const corporationObj = form.value.selectedCorp;
}

а const corporationObj теперь является выбранным объектом корпорации, который будет включать все свойства определенного вами класса корпорации.

ПРИМЕЧАНИЕ.

В html-коде в выражении [value] = "corporation" корпорация (от * ngFor = "пусть корпорация корпораций" ) привязан к [значение], а свойство name получит значение.

Поскольку имя - "selectedCorp", вы можете получить фактическое значение, получив "form.value.selectedCorp" в вашем .ts-файле.

Кстати, на самом деле вам не нужен "#corporation" в открывающем теге "select".

person William Hou    schedule 07.10.2019

person    schedule
comment
Это ответ, состоящий только из кода, что не считается очень хорошим качеством в StackOverflow. Пожалуйста, опишите, что делает этот фрагмент и почему он помогает решить исходную проблему. - person quinz; 28.08.2018
comment
Небольшая поправка: не должна ли вторая строка в функции selectOption быть console.log(this.selected); (заменяя число выбранным)? - person Ben; 24.06.2019

person    schedule
comment
Хотя этот код может предоставить решение вопроса, лучше добавить контекст, объясняющий, почему и как он работает. Это может помочь будущим пользователям изучить и в конечном итоге применить эти знания в своем собственном коде. Вы также, вероятно, получите положительные отзывы / положительные отзывы от пользователей, когда объясните код. - person Amit Verma; 17.02.2021