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

Question

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

我的代码:

<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 = ''"

Answer 1

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