web-dev-qa-db-ja.com

Angular 7：ドロップダウンボックスのxボタンで選択を解除

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>

意図したとおりに動作します

enter image description here

入力をクリアします。私が今直面している問題は、すぐに選択ボックスが開くことです。とにかく、この動作を防ぐ方法は？

選択をクリアする他の解決策があることを知っています。このアプローチが可能かどうか知りたいですか？

angularangular-materialangular7
9
LeO

(click)="selectedCountry=undefined; $event.stopPropagation()"助けました！ @SachilaへのThx :-)

したがって、完全なコードは次のようになります。

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

反応フォームの例

$event.stopPropagation()-選択を再び開かない

       <mat-form-field>
         <mat-select formControlName="team" placeholder="Team">
           <mat-option *ngFor="let team of availableTeams" [value]="team.id">{{team.name}}</mat-option>
         </mat-select>
         <button *ngIf="form.controls.team.value"
                 matSuffix
                 mat-icon-button
                 type="button"
                 aria-label="Clear"
                 (click)="form.controls.team.setValue(null); $event.stopPropagation()">
           <mat-icon>close</mat-icon>
         </button>
        </mat-form-field>
0
Ania