从Angular 4中的选择选项中获取 Value

4 回答

• 1

  作为将军（参见Stackblitz：https://stackblitz.com/edit/angular-gh2rjx）：

  HTML

  <select [(ngModel)]="selectedOption" name="first">
     <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);
  }
  

  回复于 2024-04-28T22:29:06+08:00
• 1

  export class MyComponent implements OnInit {
  
    items: any[] = [
      { id: 0, name: 'one' },
      { id: 1, name: 'two' },
      { id: 2, name: 'three' },
      { id: 3, name: 'four' },
      { id: 4, name: 'five' },
      { id: 5, name: 'six}' }
    ];
    selected: number = 0;
  
    constructor() {
    }
    
    ngOnInit() {
    }
    
    selectOption(id: number) {
      //getted from event
      console.log(id);
      //getted from binding
      console.log(this.number)
    }
  
  }
  

  <div>
    <select (change)="selectOption($event.target.value)"
    [(ngModel)]="selected">
    <option [value]="item.id" *ngFor="let item of items">{{item.name}}</option>
     </select>
  </div>
  

  回复于 2024-04-28T22:29:06+08:00
• 17

  您只需要在选择元素上放置 [(ngModel)] ：

  <select class="form-control col-lg-8" #corporation required [(ngModel)]="selectedValue">
  

  回复于 2024-04-28T22:29:06+08:00
• 4

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

  回复于 2024-04-28T22:29:06+08:00