Angular的ngbTypeahead在失去焦点时不会重置输入框的值。
创始人
2024-10-24 07:31:05
0

要解决Angular的ngbTypeahead在失去焦点时不会重置输入框的值的问题,可以使用ngModel绑定输入框的值,并在失去焦点时重置ngModel的值。下面是一个示例代码:

在组件的HTML模板中:




在组件的TypeScript代码中:

import { Component } from '@angular/core';
import { NgbTypeaheadConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-typeahead-example',
  templateUrl: './typeahead-example.component.html',
  styleUrls: ['./typeahead-example.component.css'],
  providers: [NgbTypeaheadConfig]
})
export class TypeaheadExampleComponent {
  searchText: string;

  constructor(private config: NgbTypeaheadConfig) {
    // 设置ngbTypeahead的配置,使其在失去焦点时不会重置输入框的值
    this.config.autoClose = 'manual';
  }

  search = () => {
    // 这里可以根据输入框的值执行搜索操作
    console.log(this.searchText);
  }

  resetInput = () => {
    // 在失去焦点时重置输入框的值
    this.searchText = '';
  }
}

在这个示例中,我们使用了ngModel指令将输入框的值绑定到了searchText变量上,并在失去焦点时调用resetInput方法来重置输入框的值。通过设置NgbTypeaheadConfig的autoClose属性为'manual',我们避免了失去焦点时自动关闭下拉框。

注意:这里的示例假设你已经正确安装并配置了ng-bootstrap库,以便使用ngbTypeahead指令。

相关内容

热门资讯

详细透视!德州透视是真的吗!一... 详细透视!德州透视是真的吗!一直是有辅助技巧(果真有挂)-哔哩哔哩德州透视是真的吗能透视中分为三种模...
辅助透视!wpk俱乐部怎么作必... 辅助透视!wpk俱乐部怎么作必弊,xpoker辅助,模块教程(真是有挂)-哔哩哔哩wpk俱乐部怎么作...
普及透视!德州局透视脚本下载安... 普及透视!德州局透视脚本下载安装最新版本!一贯是有辅助教程(有挂秘籍)-哔哩哔哩1、上手简单,内置详...
普及透视!wepoker辅助工... 普及透视!wepoker辅助工具,hardrock作必弊,项目教程(有挂详情)-哔哩哔哩1、起透看视...
详情透视!pokemmo脚本!... 详情透视!pokemmo脚本!都是一直都是有辅助技巧(有挂教程)-哔哩哔哩1、许多玩家不知道poke...
必备透视!hhpoker外开挂... 必备透视!hhpoker外开挂靠谱吗,wepoker怎么发冤家牌,秘籍教程(发现有挂)-哔哩哔哩;在...
解迷透视!pokemmo脚本辅... 解迷透视!pokemmo脚本辅助器!一贯是真的有辅助教程(有挂细节)-哔哩哔哩1、pokemmo脚本...
必备透视!wepoker可以免... 必备透视!wepoker可以免费玩吗,wejoker辅助器要钱玩吗,教材教程(真的有挂)-哔哩哔哩1...
分享透视!pokemmo手机版... 分享透视!pokemmo手机版修改器!切实真的有辅助教程(有挂头条)-哔哩哔哩1、全新机制【poke...
普及透视!约局吧透视挂下载,w... 普及透视!约局吧透视挂下载,wepoker怎么开辅助,烘培教程(有挂分享)-哔哩哔哩在进入约局吧透视...