Angular 从typescript为6的窗体上的选择输入获取值

我有一个用angular 6 typescript编写的表单html代码，我不知道如何从组件中获取所选值

下面是我的html页面

<article>
    <h1>What is your gender?</h1>
    <h2><span>Select a gender:</span></h2>
    <select>
        <option value="1">Male</option>
        <option value="2">Female</option>
        <option value="3">Intersex</option>
        <option value="4">Trans</option>
        <option value="5">Others</option>
    </select>
    <p><span>You selected: </span><b>{{selectedDay}}</b></p>
</article>

你的性别是什么？
选择性别：
男性
女性
雌雄同体
反式
其他
您选择：{{selectedDay}

在.ts文件中创建一个变量，如下所示：

public selectedDay:string;

在选择标记中添加此项：

<select [(ngModel)]="selectedDay">

---

使用双向数据绑定时，一旦从下拉列表中选择值，值将更新为变量。

在.ts文件中创建一个变量，如：

public selectedDay:string;

在选择标记中添加此项：

<select [(ngModel)]="selectedDay">

---

使用双向数据绑定时，一旦从下拉列表中选择值，该值将更新为变量。

尝试此操作，在Component.ts文件中，编写如下内容：

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

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html',
  styleUrls:  ['src/home/home.css']
})

export class HomeComponent {
  selectedDay: string = '';

  //event handler for the select element's change event
  selectChangeHandler (event: any) {
    //update the ui
    this.selectedDay = event.target.value;
  }
}   

在.html文件中，尝试以下操作：

<article>
    <h1>What is your gender?</h1>
    <h2><span>Select a gender:</span></h2>
    <select (change)="selectChangeHandler($event)">
       <option value="1">Male</option>
       <option value="2">Female</option>
       <option value="3">Intersex</option>
       <option value="4">Trans</option>
       <option value="5">Others</option>
    </select>
    <p><span>You selected: </span><b>{{selectedDay}}</b></p>
</article>

你的性别是什么？
选择性别：
男性
女性
雌雄同体
反式
其他
您选择：{{selectedDay}

试试这个，在Component.ts文件中，写下如下内容：

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

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html',
  styleUrls:  ['src/home/home.css']
})

export class HomeComponent {
  selectedDay: string = '';

  //event handler for the select element's change event
  selectChangeHandler (event: any) {
    //update the ui
    this.selectedDay = event.target.value;
  }
}   

在.html文件中，尝试以下操作：

<article>
    <h1>What is your gender?</h1>
    <h2><span>Select a gender:</span></h2>
    <select (change)="selectChangeHandler($event)">
       <option value="1">Male</option>
       <option value="2">Female</option>
       <option value="3">Intersex</option>
       <option value="4">Trans</option>
       <option value="5">Others</option>
    </select>
    <p><span>You selected: </span><b>{{selectedDay}}</b></p>
</article>

你的性别是什么？
选择性别：
男性
女性
雌雄同体
反式
其他
您选择：{{selectedDay}

您可以使用反应式表单并创建表单组，但为了简单起见，您可以使用

formControl

组成部分

模板

---

您可以使用反应式表单并创建表单组，但为了简单起见，您可以使用
formControl

组成部分

模板

无需添加selectchangeHandler，因为angular会自动绑定到该变量。如果您打算在下拉列表更改上进一步处理任何内容，那么您可以添加该处理程序。是的，您可以使用绑定，但是如果在select标记中有一个*ngIf，例如{{acquisitor.businessName}}现在您成功获得值，但是如何将值设置到表单或清除表单？？我建议使用angular表单解决方案，如模板或反应式表单，无需添加selectchangeHandler，因为angular会自动绑定到该变量。如果您打算在下拉列表更改上进一步处理任何内容，那么您可以添加该处理程序。是的，您可以使用绑定，但是如果在select标记中有一个*ngIf，例如{{acquisitor.businessName}}现在您成功获得值，但是如何将值设置到表单或清除表单？？我建议使用角度形式解决方案，如模板或反应形式