web-dev-qa-db-ja.com

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;
}
angularangular-directiveangular4-forms
22
Joseph

一般的には（ここの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>

TypeScript

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);
}
32
mahval
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>
12
Alexis Tamariz

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

Select要素に[(ngModel)]を追加するだけです：

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