入力を含むmat-form-fieldと、mat-optionを含むmat-autocompleteがあります。入力には（blur）イベントがあり、mat-optionには（onSelectionChange）イベントがあります。
私が抱えている問題は、アイテムを選択すると、mat-optionのonSelectionChangeイベントの前にブラーが呼び出されることです。ドロップダウンに値が存在しない場合、blurイベントのメソッドは入力を空にします。入力の（blur）イベントを削除すると、（onSelectionChange）が呼び出されます。（ぼかし）イベントの前に呼び出すには、これが必要です。
いくつかの調査の結果、（blur）の関数内で.setTimeOutを使用できることがわかりました。これにより、（onSelectionChange）の関数の後に本体を呼び出すことができますが、この修正により、入力から離れてフォーカスすると、入力を空にするのが遅れます。値が間違っている場合。
これが私が持っているhtmlコードです：
<mat-form-field [style.width.%]="fieldWidthPercentage">
<input matInput #tagsInput (blur)="checkIfMatch()">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let item of filteredAutoCompleteItems | async"
(onSelectionChange)="selected(item)" [value]="item">
{{ item.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
（ぼかし）イベントの関数は次のとおりです。
checkIfMatch() {
setTimeout(() => {
// . . .
}, 1000);
}
}
私は私の質問の解決策を見つけました：blurの呼び出しのために、イベントの関連するターゲットがmat-optionから来ているかどうかを確認するためのチェックを追加しました。この場合、checkIfMatchのコードは呼び出されません。
checkIfMatch(event) {
if (event.relatedTarget && event.relatedTarget.id.indexOf('mat-option') > -1) {
// In case of a direct selection, there is no need to check if it matches.
event.preventDefault();
return;
}
...
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加