[英]angular2 - clear input field value after click
我在重置輸入值時遇到問題。 我有帶有過濾器功能的搜索欄。 當我寫一些值時,它會向我顯示其下的列表,我想向該錨點添加功能,當我單擊其中的一些錨點時,它會將我路由到另一個組件,並且我想清除輸入值。
我的代碼:
<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>
我試圖將此值設置為null或”,例如:
(click)="query.value = ''"
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
<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>
在課堂上添加
@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.