javascript - 如何获得垫选择的价值
问题描述
我有一个垫子选择,我想获取用户选择的下拉列表的值。我怎样才能做到这一点?另外,如果用户通过重新选择来更改值,我该如何捕获它。html代码:
<mat-form-field appearance="fill">
<mat-label>Country</mat-label>
<select matNativeControl formControlName='country' (change)="selected($event)">
<option disabled>Select</option>
<option *ngFor="let option of country" [value]="option">{{option}}</option>
</select>
</mat-form-field>
打字稿代码:
country = ['au', 'kr', 'gb'];
解决方案
检查此沙箱:https ://stackblitz.com/edit/angular-1k7ykb-cfmaq7?file=app%2Fselect-value-binding-example.ts
ngModel 将选择器的值与 TS 文件中的值绑定。您不需要单独的更改处理程序
在您的 HTML 中
<mat-select [(ngModel)]="selected">
<mat-option *ngFor="let o of arr" [value]="o">{{o}}</mat-option>
</mat-select>
<div> Seleced: {{selected}}</div>
在你的 TS 文件中使用你的数组(我们甚至可以设置默认值)
export class SelectValueBindingExample {
selected: string;
arr: string[] = [];
constructor() {
this.arr.push("au");
this.arr.push("kr");
this.arr.push("gb");
this.selected = 'gb';
}
}
推荐阅读
- flask - 如何从浏览器捕获相机馈送并发送到烧瓶服务器
- sorting - 计算插入排序和合并排序的时间
- c# - XAML 绑定到 BitmapSource 的文件大小限制是多少?
- regex - 正则表达式问题:医学术语的标准化
- html - 网页抓取,html表格分页
- python - Django Python - 变量似乎被缓存了?
- plugins - 无法从 Dynamics 365 插件调用 Web url(错误)
- python - keras 的 preprocess_input 导致 ValueError: Data cardinality is ambiguous
- github-actions - 纱线 2:CI 期间的“纱线版本检查”总是出错
- excel - 如何对过滤后的数据运行公式