如何在angular6中单击一个按钮时获取多个下拉列表的选定值

Question

我有 2 个下拉菜单，我需要在单击 angular 6 或 typescript 中的保存按钮时获取这些下拉菜单的选定值。我在 jquery 中知道，但在这里我是 angular 6 的新手，谁能帮帮我。下面是代码

app.component.html

<select class="select1">
    <option>country1</option>
    <option>country2</option>
    <option>country3</option>
    </select>

    <select class="select2">
    <option>state1</option>
    <option>state2</option>
    <option>state3</option>
    </select>
    <button (click)="save()">save</button>

app.component.ts

declare var require: any;
import { Component,OnInit, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
    toggle:boolean = true;  
    click : any;
    selectOneVal : any;
    selectTwoVal : any;

  ngOnInit(){

  }


save(){
    console.log(this.selectOneVal);
    console.log(this.selectTwoVal)
}

}

Answer 1

我认为您需要阅读有关 Angular 中的表单here

app.component.html

<div style="text-align:center">
  <select class="select1" [(ngModel)]="selectOneVal">
    <option value="country1">country1</option>
    <option value="country2">country2</option>
    <option value="country3">country3</option>
  </select>

  <select class="select2" [(ngModel)]="selectTwoVal">
    <option value="state1">state1</option>
    <option value="state2">state2</option>
    <option value="state3">state3</option>
  </select>
  <button (click)="save()">save</button>
</div>
<small>
  selectOneVal: {{ selectOneVal}}
</small>
<br/>
<small>
  selectTwoVal: {{ selectTwoVal}}
</small>

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  toggle: boolean = true;
  click: any;
  selectOneVal: any;
  selectTwoVal: any;

  ngOnInit() {
    this.selectOneVal = "country1";
    this.selectTwoVal = "state1";
  }

  save() {
    console.log(this.selectOneVal);
    console.log(this.selectTwoVal);
  }
}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

这是codesandbox的有效答案