Question

我有一个用Angular 6打字稿写的表单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>

Answer 1

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

public selectedDay:string;

在选择代码中添加它：

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

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

Answer 2

您可以使用反应性表单并创建formGroup，但是为了简单起见，您可以使用formControl。

组件

  selectControl:FormControl = new FormControl()

模板

<article>
    <h1>What is your gender?</h1>
    <h2><span>Select a gender:</span></h2>
    <select [formControl]="selectControl">
        <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>{{selectControl.value}}</b></p>
    <button (click)="selectControl.setValue('4')">Set Value</button>
</article>

这似乎可以代替ngModel，但我只是推广反应形式

demo

Answer 3

尝试此操作，在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>

从打字稿Angular 6

3 个答案: