Angular 7:使用下拉框中的 x 按钮清除选择 [英] Angular 7: Clear selection with x-button on a dropdown box

问题描述

我想我可以将 Angular 的示例结合起来用于

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

我知道存在其他清除选择的解决方案.我想知道这种方法是否可行?

解决方案

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

所以完整的代码如下:

 <mat-icon>关闭</mat-icon>

I thought I can combine the examples from Angular for dropdown and the Input with clear box to:

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

Which works close to the way as intended

which clears the input. The problem I'm facing now is that it immediately opens the selection box. Anyway how to prevent this behaviour?

I know there exists other solutions for clearing the selection. I want to know if this approach is possible?

解决方案

(click)="selectedCountry=undefined; $event.stopPropagation()" helped! Thx to @Sachila :-)

So the full code looks like:

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

这篇关于Angular 7:使用下拉框中的 x 按钮清除选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！