[英]angular2 - clear input field value after click
I have problem with reseting my input values. 我在重置输入值时遇到问题。 I have search bar with filter functions. 我有带有过滤器功能的搜索栏。 When i write some value it shows me list under it and i want to add function to this anchors, when i click some of them it routes me to another component and i want to clear the input value. 当我写一些值时,它会向我显示其下的列表,我想向该锚点添加功能,当我单击其中的一些锚点时,它会将我路由到另一个组件,并且我想清除输入值。
My code: 我的代码:
<div class="form">
<input #query (keyup)="filter(query.value)" type="text" class="form-control" placeholder="Search...">
<ng-container *ngIf="query.value">
<div *ngFor="let f of filteredProducts">
<a (click)="!query.value" [routerLink]="['/product-details/', f.category , f.$key]">{{ f.name }}</a>
</div>
</ng-container>
</div>
i've tried to set this value to null or '' like: 我试图将此值设置为null或”,例如:
(click)="query.value = ''"
https://plnkr.co/edit/dyCp5ZMKOkZvcsw4F8og?p=preview check out this link and use ngmodal and set value to null https://plnkr.co/edit/dyCp5ZMKOkZvcsw4F8og?p=preview检查此链接并使用ngmodal并将值设置为null
<div>
<input type="text" placeholder="Search..." [(ngModel)]="searchValue">
<button (click)="clearSearch()">Clear</button>
</div>
export class App {
searchValue:string = '';
clearSearch() {
this.searchValue = null;
}
}
Html HTML
<div class="form">
<input #query (keyup)="filter(query.value)" type="text" class="form-control" placeholder="Search...">
<ng-container *ngIf="query.value">
<div *ngFor="let f of filteredProducts">
<a href="javascript:void(0)" (click)='myfun(f)'>{{ f.name }}</a>
</div>
</ng-container>
</div>
In class add 在课堂上添加
@ViewChild("query") input: ElementRef;
myfun(f) {
this.input.nativeElement.value = "";
this.router.navigate(['/product-details/', f.category , f.$key]");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.