Javascript angular2-单击后清除输入字段值

我在重置输入值时遇到问题。我有过滤功能的搜索栏。当我写一些值时，它会在下面显示我的列表，我想向这个锚添加函数，当我单击其中一些时，它会将我路由到另一个组件，我想清除输入值

我的代码：

<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>

Html

检查此链接并使用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;
  }
 }

清楚的
导出类应用程序{
searchValue:string=''；
clearSearch（）{
this.searchValue=null；
}
}

您可以使用ng model=“searchAll”并调用function将值设置为null$scope.searchAll=null；查看此链接angular2的使用情况如何？查看此链接并使用相同的use ngmodal并将值设置为Null尝试在单击时调用函数，在函数中首先将输入值设置为空白，然后导航。ok@FreeStyle09我将其添加为应答this.input.nativeElement.value=“”；-->这段代码帮助我清除了文本框。我的代码是：

<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]");
}

<div>
  <input type="text" placeholder="Search..."  [(ngModel)]="searchValue">
  <button (click)="clearSearch()">Clear</button>
</div>


     export class App {
      searchValue:string = '';
     clearSearch() {
     this.searchValue = null;
  }
 }