javascript - How do we clear an angular dropdown list value in angular?
问题描述
How do we clear an angular dropdown list value in angular ? clear the selection with an x button or clear button ? Thank You.
Code
<div fxFlex fxLayout="row" formGroupName="people">
<mat-form-field appearance="outline" class="pr-4" fxFlex>
<mat-label>People</mat-label>
<mat-select formControlName="people">
<mat-option *ngFor="let people of Peopls" [value]="peope.value">
{{ people.literal }}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-button *ngIf="" matSuffix mat-icon-button
aria-label="Clear" (click)="";>
<mat-icon>close</mat-icon>
</div>
</div>
解决方案
尝试设置selectedValue.value=undefined">
点击事件。
例如
<div >
<mat-form-field>
<mat-label>People</mat-label>
<mat-select #selectedValue >
<mat-option *ngFor="let p of people" [value]="p.value">
{{ p.value }}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-button (click)="selectedValue.value=undefined">X</button>
</div>
推荐阅读
- sql - 为什么我不能将两个 sql 命令与 Postgresql 中的“with”语句捆绑在一起?
- css - 在 CSS 中实现背景过滤器:不透明度(0%)
- typescript - 如何在 TypeScript 定义中有可选库?
- postgresql - 具有多列的 Postgres 多列索引与许多单索引
- karate - 空手道 UI:所选选项未在下一页应用
- python - 如何创建一列数组,其值来自一列并且它们的长度来自pyspark数据帧中的另一列?
- azure - Azure 数据工厂 - 复制活动中的操作顺序
- r - 如何同时绘制多个 r 预测?
- node.js - 如何修复不和谐机器人发送多个响应?
- go - Golang SQL 预期 0 个参数得到 1