angular - Angular 7：使用下拉框上的 x 按钮清除选择

Question

我想我可以将Angular for dropdown和Input with clear box中的示例结合起来：

<mat-form-field >
  <mat-select placeholder="Country" [(value)]="selectedCountry" (selectionChange)="emitItemChanges()">
    <div *ngFor="let item of lstItems|async">
      <mat-option *ngIf="addItem(item)" [value]="item">{{item.title}}</mat-option>
    </div>
  </mat-select>
  <button mat-button *ngIf="selectedCountry" matSuffix mat-icon-button aria-label="Clear" 
    (click)="selectedCountry=undefined">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

其工作方式接近预期的方式

清除输入。我现在面临的问题是它会立即打开选择框。无论如何如何防止这种行为？

我知道还有其他解决方案可以清除选择。我想知道这种方法是否可行？

标签： angularangular-materialangular7

Answer 1

(click)="selectedCountry=undefined; $event.stopPropagation()"帮助！感谢@Sachila :-)

所以完整的代码如下：

  <button mat-button *ngIf="selectedCountry" matSuffix mat-icon-button 
    aria-label="Clear" (click)="selectedCountry=undefined; $event.stopPropagation()">
  <mat-icon>close</mat-icon>