从Angular 4中的Select选项获取价值 [英] Get Value From Select Option in Angular 4

问题描述

如何从Angular 4的select选项中获取值?

How do I get the value from the select option in Angular 4?

我想将其分配给component.ts文件中的新变量.我已经尝试过了，但是什么也没输出.

I want to assign it to a new variable in the component.ts file. I've tried this but outputs nothing.

您还可以使用[(ngModel)]吗?

Can you also do it using [(ngModel)]?

component.html

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

component.ts

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

推荐答案

作为常规(请参见此处的Stackblitz: https://stackblitz.com/edit/angular-gh2rjx ):

As a general (see Stackblitz here: https://stackblitz.com/edit/angular-gh2rjx):

HTML

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:

---

In your specific case you can use ngModel like this:

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

这篇关于从Angular 4中的Select选项获取价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！