使用 angular mat-autocomplete 节省(聚焦) [英] Save on (focusout) with angular mat-autocomplete

问题描述

我有一个带有自动完成功能的简单输入

I have a simple input with autocomplete

<input [matAutocomplete]="auto" (focusout)="save()">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

我想在用户不再使用输入字段时保存输入值

I want to save the input value when the user is no longer using the input field

问题是当我点击输入字段的自动完成选项焦点功能时被调用.

The issue is when i am clicking on a autocomplete option focusout function of input field is called.

我有哪些选项可以保存检查自动完成和输入字段状态的输入值

What are my options to save input value which checks both autocomplete and input field status

谢谢

推荐答案

如果您只想处理点击自动完成选项，您应该在该选项上使用 (click) 来处理它.

If you ONLY want to handle the clicking on autocomplete option you should use (click) on that option to handle it.

<input [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option (click)="save(number)" *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

但是，如果你想专注地做，这会奏效:

However, if you want to do it with focus, this will work:

<input #myInput (focusout)="save(myInput.value)" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

Stackblitz

这篇关于使用 angular mat-autocomplete 节省(聚焦)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！