检索 angular select div 的当前值
Retrieving current value of angular select div
我需要获取 select 标签的当前选择值,因为下一个标签数据取决于这一天 selected。
我的 html 标签如下所示:
<div class="form-group">
<label for ="visitData">Choose day for the visit : </label>
<select class="form-control" id="visitData" (change) = "updateVisitDate($event)" >
<option id="visitData" *ngFor="let type of myDate" value="{{type.date}}">{{type.date}}</option>
</select>
</div>
TypeScript 文件中的函数:
updateVisitDate(event:any){
event.preventDefault()
let target = event.target;
this.visitData = target.querySelector('#visitData').value;
console.log("Found date : "+ this.visitData);
this.http.get(`http://localhost:9000/freeHours/getDay`,{params : {date:this.visitData}}).subscribe(data=>this.periods = data);
}
每当我从 select 字段更改日期时,我都会在同一天进入日志(第一个选项)。有什么建议吗?
使用属性绑定,
[value]="type.date"
并获取 value ,在您的函数中使用 event.target.value
。
即 this.visitData = event.target.value;
这是针对您的问题的有效演示
https://stackblitz.com/edit/angular-ivy-oygbwj?file=src%2Fapp%2Fapp.component.ts
我需要获取 select 标签的当前选择值,因为下一个标签数据取决于这一天 selected。 我的 html 标签如下所示:
<div class="form-group">
<label for ="visitData">Choose day for the visit : </label>
<select class="form-control" id="visitData" (change) = "updateVisitDate($event)" >
<option id="visitData" *ngFor="let type of myDate" value="{{type.date}}">{{type.date}}</option>
</select>
</div>
TypeScript 文件中的函数:
updateVisitDate(event:any){
event.preventDefault()
let target = event.target;
this.visitData = target.querySelector('#visitData').value;
console.log("Found date : "+ this.visitData);
this.http.get(`http://localhost:9000/freeHours/getDay`,{params : {date:this.visitData}}).subscribe(data=>this.periods = data);
}
每当我从 select 字段更改日期时,我都会在同一天进入日志(第一个选项)。有什么建议吗?
使用属性绑定,
[value]="type.date"
并获取 value ,在您的函数中使用 event.target.value
。
即 this.visitData = event.target.value;
这是针对您的问题的有效演示 https://stackblitz.com/edit/angular-ivy-oygbwj?file=src%2Fapp%2Fapp.component.ts