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

我有两个下拉列表，我只需要点击angular 6或typescript中的保存按钮就可以获得这些下拉列表的选定值。我知道在jquery中，但这里我是angular 6的新手，有人可以帮助我吗。下面是代码

app.component.html

---

我认为你需要阅读有关角度的表格

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.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 {}

---

这是关于

的有效答案。我想你需要阅读有关角度的表格

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.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 {}

---

这是

的工作答案，其显示错误无法绑定到“ngModel”，因为它不是“select”的已知属性。您需要在app.module.ts中导入FormsModule，我刚刚编辑了答案。@UIAPPDEVELOPER我的答案有用吗？请把它标为答案。由于“ngModel”不是“select”的已知属性，因此无法绑定到“ngModel”。您需要在app.module.ts中导入FormsModule，我刚刚编辑了答案。@UIAPPDEVELOPER我的答案有用吗？请把它标为答案。谢谢

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