在Angular Material Table过滤器中添加按钮

Question

我拥有 Angular Material中的表格过滤器： -

我想要此过滤器右侧的图标，如下所示： -

我尝试过很多配置，没有运气。

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    <span class="input-group-append">
      <button class="btn" (click)="doSomething()">
          <i class="fa fa-plus fa-fw"></i>
      </button>
    </span>
</mat-form-field>

有没有简单的方法来实现这个目标？

Answer 1

材料2在其文档中支持

<mat-form-field class="example-form-field">
  <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
  <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

this answer with the longer equivalent of -u, --set-upstream-to

https://material.angular.io/components/input/examples