http get请求的Angular get value选择菜单

Question

我在一个网站上工作，其中使用一个选择菜单。当从菜单中选择一个项目时，应该向后端发送一个HTTP get请求，以便使用选择菜单中的关键字过滤SQL数据。

我不知道如何在http get请求中使用选择菜单中的值。下面是我当前的代码：

<div class="form-group">
    <select name="Tools" id="Tools" style="width: 900px;">
        <option value="None">Select...</option>
        <option value="Crimping_Pliers">Crimping Pliers</option>
        <option value="Voltage_Tester">Voltage Tester</option>
        <option value="Waterpump_Pliers">Waterpump Pliers</option>
        <option value="Cable_Cutter">Cable Cutter</option>
        <option value="Diagonal_Cutter">Diagonal Cutter</option>
        <option value="Stripping_Tool">Stripping Tool</option>
        <option value="Stripping_Tool_Set">Stripping Tool Set</option>
        <option value="Stripping_Tool_Holder">Stripping Tool Holder</option>
        <option value="Combination_Pliers">Combination Pliers</option>
        <option value="Needle_Nose_Pliers">Needle Nose Pliers</option>
        <option value="Stanley_Knife">Stanley Knife</option>
        <option value="Drill_Set">Drill Set</option>
        <option value="Screwdriver">Screwdriver</option>
    </select>
</div>

因此，目前我需要使用选项中的值来过滤SQL数据(或发出特定请求)。

因此，现在我需要创建一个函数，该函数使用选择菜单中的值发送get请求。我用typescript来做这件事。但我不知道如何获得想要的价值观。我该怎么做呢？

下面是我的get请求：

filterList(){
this.http.get(this.rootURL + 'Users' + '/value from selection menu')
.toPromise()
.then(res => this.list = res as UserDetail[])
}

Answer 1

在TS文件中，您可以使用一个变量，如optionValue

然后在您的html模板中

<select name="Tools" id="Tools" style="width: 900px;"  (change)="myFunction($event)">
        <option value="None">Select...</option>
        <option value="Crimping_Pliers">Crimping Pliers</option>
        <option value="Voltage_Tester">Voltage Tester</option>
        <option value="Waterpump_Pliers">Waterpump Pliers</option>
        <option value="Cable_Cutter">Cable Cutter</option>
        <option value="Diagonal_Cutter">Diagonal Cutter</option>
        <option value="Stripping_Tool">Stripping Tool</option>
        <option value="Stripping_Tool_Set">Stripping Tool Set</option>
        <option value="Stripping_Tool_Holder">Stripping Tool Holder</option>
        <option value="Combination_Pliers">Combination Pliers</option>
        <option value="Needle_Nose_Pliers">Needle Nose Pliers</option>
        <option value="Stanley_Knife">Stanley Knife</option>
        <option value="Drill_Set">Drill Set</option>
        <option value="Screwdriver">Screwdriver</option>
    </select>

并在TS文件中定义此函数，如下所示：

myFunction(event) {
    let optionValue = event.target.value
    console.log(optionValue)
}

您还可以将函数参数化，如下所示

filterList(option){
this.http.get(`${this.rootURL}/Users/${option}`)
.toPromise()
.then(res => this.list = res as UserDetail[])
}

并使用给定的选项值从myfunction调用上述函数