在@ng-select/ng-select中未触发搜索事件
在@ng-select/ng-select中未触发搜索事件可能是由于以下几个原因：
- 组件配置问题：首先，需要确保ng-select组件已正确配置以触发搜索事件。在ng-select中，可以使用
[searchable]="true"属性来启用搜索功能。确保该属性已设置为true。 - 事件绑定问题：确保已正确绑定搜索事件。ng-select组件提供了
(search)="onSearch($event)"事件，其中onSearch是一个在组件中定义的方法，用于处理搜索逻辑。确保已正确绑定该事件并在方法中实现相应的搜索逻辑。 - 数据源问题：如果搜索事件没有触发，可能是由于数据源的问题。确保ng-select组件的数据源已正确设置，并且包含了需要搜索的数据。可以通过
[items]="data"属性将数据源绑定到ng-select组件上，其中data是一个包含搜索数据的数组。 - 输入框问题：检查ng-select组件的输入框是否正确显示，并且可以接收用户的输入。确保输入框已正确渲染，并且没有被其他元素或样式覆盖。
如果以上步骤都已经检查并且问题仍然存在，可以尝试在ng-select的GitHub仓库中查找相关问题或提出新的问题，以获取更多帮助和支持。以下是腾讯云提供的一个类似的组件，可以用于实现类似的功能：
腾讯云相关产品：云开发（Tencent Cloud Base） 产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
我试图用ng-select multiple with复选框来实现(模糊)，这样每次我改变我的模型时，我就不会进行api调用，只有当ng-select处于模糊状态时，才会进行.API调用。Api将被调用(模糊)。但是当我点击复选框时，它是在ng-select中定义的，仅使用ng-template，它触发了blur事件。我只想在模糊时发射。
<div style="width: 100%" tabindex="0" >
<ng-select #mySelect class="
浏览 0提问于2018-10-31得票数 0
2回答
角4.3+
我正在使用NG2-选择下拉。
我想在某件事上打开下拉门。我想触发打开下拉列表的事件。
下坠：
<ng-select
[items]="list"
[(ngModel)]="modelName"
placeholder="Select">
</ng-select>
当用户单击下拉列表时，它会获得焦点并显示列表。我希望这种情况发生在不同按钮上的一些点击事件上。
到目前为止，我已经尝试过：
this.el是ng-select元素的ElementRef。(获得ng-sel
浏览 1提问于2017-12-01得票数 2
回答已采纳
我有一个使用ng-select的组件。我在stackblitz上找到了类似的东西。。每次我在ng-select中输入要搜索的值，然后用退格符将其删除时，它都会显示最后选择的项。如何取消显示？
浏览 2提问于2020-10-19得票数 0
我使用，并在选定的项上触发回调，该回调执行一些逻辑。我面临的问题是，当我从列表中选择项目并使用(change)事件时，(add)事件不会触发。但是如果我两次使用列表中的一项，那么change事件就不会触发，因为它是一个change事件。
<ng-select
[clearSearchOnAdd]="true"
(change)="changeLeagueOwner($event)"
(add)="test()" ---> nothing here
[clearable]="false"
浏览 2提问于2018-07-17得票数 3
我在Angular 12应用程序中使用ng-select 7.2.0。 我需要提供给ng-select的数据包含数万个条目，所以我不想将所有数据预先加载到ng-select中，让它在您键入时执行前端过滤。 相反，我希望ng-select使用我的后端作为数据源，并传递一个参数，例如q，与用户输入的内容一起触发自动完成。 例如，如果用户在输入栏中键入"foo"，我希望ng-select以?q=foo作为参数对我的服务器执行HTTP GET。然后，后端将执行过滤，并仅返回与foo匹配的项目。 然后用户可以从这些中选择他们想要的。 我在这个页面上没有找到关于这一点的提及： https
浏览 16提问于2021-07-29得票数 0
<ng-select class="custom" [items]="ingredientsSearchList" bindLabel="name" bindValue="value" placeholder="Search ingredients/your products" (search)="onSearch($event)" loadingText="Searching">
</ng-select>
是我的代码。但奇怪的是，除了
浏览 7提问于2018-09-07得票数 4
回答已采纳
我在我的项目中使用ng-select进行搜索。我希望列表仅在用户键入超过2个字符时显示。我已经尝试了ng-select的搜索，更改和打开事件，但我没有得到用户输入的实际术语。任何帮助都是非常感谢的。
浏览 27提问于2019-06-30得票数 2
回答已采纳
是否可以使用cdk拖放来重新排列ng-select中的多个选择值。您可以检查实现是否更改了模型值，但并未反映在下拉列表中。用户可以使用cdk Drap和Drop重新排列dropdown中的多个选定值。用于ng的HTML -使用cdk拖放进行选择
<label>Drap and drop</label>
<ng-select cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="selectedLocations"
[(ngModel)]="s
浏览 7提问于2021-05-14得票数 1
1回答
我正在处理一个angular项目，在字段中设置验证错误消息时遇到问题。当组件被触摸并且模型无效时，我想设置错误类。 我尝试将event (blur)放在子组件上，并将event放在子组件的html中。 <!--parent-->
<form #formGlobal="ngForm>
<child-component (modelChange)="syncWithHiden()" ></child-component>
<input type="hidden" #data="ngModel&#
浏览 18提问于2019-09-06得票数 1
选择...在我的应用程序中。是否可以将其用作自动完成字段，选择值不是必填项。我想使用ng-select，因为它使用了一个虚拟卷轴，而angular material中的mat-autocomplete并不使用，而且有了很多值，mat-autocomplete会变慢。
我的问题是:是否可以将ng-select用作自动补全函数。换句话说:不带所需的select选项的ng-select。如果我在ng-select字段之外单击，如果没有选择任何内容，则该值将为空。价值必须保持不变..
<label>Your first ng-select</label>
<n
浏览 1提问于2018-05-03得票数 8
对于在表单中填充的不同属性，我有动态的选择框。在发生更改事件之前，我希望从下拉列表中存储所选属性值的数组。(属性=>数组具有属性下的多个下拉值)
<div *ngFor="let p of properties; let i = index">
<ng-select placeholder="Select" (change)="onChange($event)">
<ng-option *ngFor="let value of p.values" [value]=
浏览 0提问于2021-01-04得票数 0
回答已采纳
1回答
在ng-选择中，用户需要在输入后按enter键来创建标记。但是在我的场景中，当用户从ng中删除焦点时，也需要创建标记--输入后选择元素(当用户键入并且不按enter键时)。这是HTML部分。在角反应形式中使用这个。
<ng-select placeholder="Tags" [items]="[]" [addTag]="true" [multiple]="true" [selectOnTab]="true" [isOpen]="false" formControlName="tags&
浏览 3提问于2020-08-13得票数 0
我使用ng-select自定义服务器端搜索来加载数据，而不管用户是否提供了搜索词。 component.html <ng-select [items]="filterValues$ | async"
[typeahead]="filterValuesInput$"
[multiple]="true"
(open)="getFilterValues(pref.id)"
[loading]="filterValuesLoading"
bindLabel="name
浏览 34提问于2020-04-30得票数 0
我正在使用ng-select
https://www.npmjs.com/package/@ng-select/ng-select
npm库在我的专业项目中。它处理的是大数据，没有任何问题。
但是，我无法编辑选定的项目和导航键无法在输入框内工作，一旦项目被选中。
例如，我首先搜索了something12，然后选择了something31。在这种情况下，我不能清除最后两个字符。要更改搜索内容，我必须清除全文并重新键入以进行新的搜索。
版本：
ng-select 2.16.4
angular 7.2.2
浏览 6提问于2019-12-31得票数 1
在执行库存搜索时，用户有几个选项来改进他们的搜索。所有选项都不是必需的，但如果没有选择一个，ng-select会将选择解释为"NULL“，服务器不会处理GET请求，因为它期望的是一个空字符串。这个问题可以通过不使用占位符文本而改为使用空字符串来解决，但显然这会损害用户体验。我需要一种方法来传递一个空字符串的ng-select时，没有选择，同时仍然有占位符文本。 <ng-select placeholder="{{'Select year' | translate}}" [(ngModel)]="selectedHeavyDutyY
浏览 11提问于2019-06-29得票数 0
3回答
我有三个组件--组件A、组件B和组件C。组件A封装组件B。组件B封装组件C。如果在每个组件中使用@ use ()，那么根组件中的选项是否会通过嵌套组件传递到组件C？见下文：
<component-a [options]="options">
<component-b [options]="options">
<component-c [options]="options">
</component-c>
</component-b>
</component-
浏览 4提问于2018-08-13得票数 0
回答已采纳
3回答
我在应用程序中使用ng-select。
我的组件类是
export class ExampleComponent {
selectedCoursesList: Course[] = [];
courseList: any[] = [];
removeCourse( course: Course) {
this.selectedCoursesList.forEach((item, index) => {
if (item === course) {
this.selectedCours
浏览 1提问于2018-07-25得票数 2
我是个八角形的新手。
我在一个组件中创建了下面的下拉菜单，它对我非常有用：
<ng-select class="w-25 p-3" placeholder="{{'author' | translate}}" [clearable]="false" [searchable]="false">
<ng-option>{{'author' | translate}}</ng-option>
<ng-option>{{'
浏览 7提问于2020-02-10得票数 12
回答已采纳
1回答
下拉列表中的搜索字段
、、、
我正在尝试创建一个内部带有ng-select的组件。我还想在下拉列表中添加一个搜索字段：
<ng-select
#mySelect
[items]=[cars]
[placeholder]="placeholder"
>
<ng-template ng-header-tmp>
<span>My label</span>
</ng-template>
<ng-template> Need search filed here</ng-template>
浏览 16提问于2020-03-05得票数 0
在我的情况下，我需要根据自定义逻辑对数据进行排序，在ng-select下进行搜索。可以使用searchFn在多个字段中进行搜索，但我需要根据自定义逻辑对匹配结果进行排序。
是可能的吗？请分享一些最初的理想，这是如何实现的?
ng-选择：
浏览 5提问于2019-10-31得票数 5
因此，在我的代码中有两个ng-select，如果我选择第一个ng-select值，我想在第二个ng-select中隐藏相同的select选项。但是我不知道如何控制它。我想将Jquery与一起使用，但没有机会。sourceLangCodeList和targetLangCodeList都有值EN，KR，所以我想尝试的是，一旦我选择了其中一个ng-select的值，隐藏第二个ng-select具有的相同值。请帮帮我！
<td>
<div class="form-group">
<ng-selec
浏览 0提问于2020-07-29得票数 0
1回答
值为空的switchMap
、、、、
我使用自定义服务器端搜索来根据用户键入的内容加载数据。目前，只有当一个关键字被实际按下时，它才能起作用。我想在每次打开下拉菜单时触发http请求，即使搜索项为空
component.html
<ng-select [items]="filterValues$ | async"
[typeahead]="filterValuesInput$"
[multiple]="true"
(open)="getFilterValues(pref.id)"
[loading]="filterValu
浏览 3提问于2020-04-30得票数 0
1回答
我使用的是angular cli version11.2.8，使用的是ng-select版本7.3。目前，我可以按照预期呈现UI，但是当我尝试在select元素内的输入框中进行搜索时，它没有搜索到任何内容。我在NPM本身的包细节中寻找这个问题，然后有一个与不同类型的angular CLI版本兼容的版本列表。看起来我使用的是正确的版本，但ng-select仍然不能正常工作。 <ng-select [(ngModel)]="selectedCars">
<ng-option *ngFor="let car of cars" [value]=
浏览 43提问于2021-09-23得票数 0
我使用ng-select进行自动完成输入，并且它也正常工作，但是我想按它的名称和它的id.What搜索元素，应该这样做吗？
<label>Your first ng-select</label>
<ng-select [items]="SearchedData"
bindLabel="CountryName"
bindValue="PkCountryMaster"
placeholder="Select Country"
浏览 2提问于2019-07-25得票数 0
回答已采纳
我在不同的门户网站上搜索了很多，但仍然没有取得任何成功。我们如何在反应性表单中创建ng-select，我想以反应性的形式创建下面的html标记。下面的代码片段摘自formGroup。
HTML:
<ng-select #ngSelect formControlName="searchCreteria"
[items]="people"
[multiple]="true"
bindLabel="name"
浏览 6提问于2020-08-26得票数 1
回答已采纳
我在我的angular web应用程序项目中使用了ng-select库。当用户在搜索框中输入搜索词时，我希望使用一个通过将搜索字符串作为输入来返回值的搜索服务，而不是通过匹配字符串来显示值。
<ng-select #Selector
[items]="displayList"
class="search-icon select-custom"
bindLabel="displayName"
notFoundText="No results fou
浏览 3提问于2020-07-10得票数 0
2回答
不同分量的角度显示搜索结果
、、、、
我有主页中的搜索功能(HomePageComponent)，当我单击搜索时，它将重定向到不同的页面，称为搜索列表页( searchListComponent )，并且在searchListComponent本身(根据应用程序设计)中又有一个组件，称为搜索卡组件(SearchCardComponent)，其中显示所有的搜索结果。我试图使用事件发射器将搜索文本从homePageComponent发送到searchCardComponent，但不知怎么的，数据没有传递。如果有人帮忙就好了。
下面的示例代码
homePageComponent
HTML (产品A)
<ng-select
浏览 0提问于2020-04-07得票数 0
1回答
我想有一个ng-select，它只允许在键入/搜索时使用数字，因为它只用于年份字段
<ng-select class="single" [items]="years" [multiple]="false" bindLabel="name" #select >
我们有没有办法控制用户可以输入的内容？
浏览 1提问于2019-07-19得票数 0
我正在使用下面的ng-select模块，但在使用简单数组时遇到了问题。
它需要的选项格式是一个对象数组：
{
value: string;
label: string;
}
但对于提供的数据，我没有这样的选择。
我的对象：
{
name: "something",
tags: ["option1","option2","option3"],
tagPrimary: "",
...
}
在我的Angular5组件模板中：
<ng-select
place
浏览 18提问于2017-12-22得票数 0
回答已采纳
1回答
我使用angular2和作为下拉列表。每当在下拉列表中执行搜索，并且列出的项目匹配条件突出显示所搜索的文本时，单击该文本时，下拉列表中未显示选定的项目。当您在列出的项目中选择搜索文本之外的任何其他文本时，它将被选中。是什么导致了这种行为？
代码如上所述：
<ng-select [items]="tests"
(data)="updateSelected($event')"
[active]="selectChannel"
id="channelList{{ta
浏览 1提问于2017-08-22得票数 0
2回答
我试图构建一个非常简单的应用程序，它向一个包含输入产品upc信息的字段的站点显示一个upc视图。该应用程序的唯一原因是为我们的仓库员工提供内置条形码扫描仪功能。到目前为止，所有操作都很好，直到使用以下代码将扫描的条形码信息插入到textfield：
webView.evaluateJavaScript("document.activeElement.value='(text)'")
我遇到的问题是，我试图为表单编码，以便在扫描后立即提交/搜索。到目前为止，搜索按钮甚至没有显示为使用value属性似乎没有注册为文本输入。
我已经在网上搜索了好几个小时(也许是错误的
浏览 3提问于2021-04-12得票数 0
回答已采纳
我正在调试使用ng-select的组件，每次输入输入时，即使我在视图中不使用ngModel，我的ngModel也会发生变化。我删除了ngModel的所有用法，只保留了类属性。
<div>
<div class="invlisible" #list>
<div *ngFor="let item of items">{{item}}</div>
</div>
<div class="invlisible" #value>{{ngModel}}</div&
浏览 1提问于2019-03-25得票数 0
2回答
我正在处理一个页面，其中我需要一个带有搜索字段的选择框，因此我决定对其使用ngSelect模块。
我的HTML：
<ng-select [items]="mesurePoints"
bindLabel="name"
bindValue="id"
>
</ng-select>
选择列表在某些更改后未链接到mesurePoints值。
浏览 4提问于2018-04-12得票数 7
目前，我正在使用Angular-12 ng-select dependent dropdown作为国籍、州和城镇： 我有一个来自端点的Json响应： {
"results": {
"countries": [{
"id": 1,
"name": "Italy",
},
{
"id": 2,
"name": "Belgium",
}
]
}
浏览 35提问于2021-09-01得票数 0
回答已采纳
3回答
我跟随这个在一个角度应用程序中安装Ngselect模块，并在服务应用程序时得到了这个错误。我在谷歌上搜索，找不到这里出了什么问题。
D:/ku-site/ku-web/node_modules/@ng-select/ng-select/lib/ng-select.module.d.ts‘中由D:/ku-site/ku-web/ku-web/src/app/app.module.ts'.中的模块'AppModule导入的意外值'NgSelectModule中的错误请添加一个@NgModule注释。
app.module.ts
import { BrowserMod
浏览 16提问于2021-12-26得票数 0
回答已采纳
1回答
我使用角4和弹簧引导，我得到所有的记录从弹簧引导到角4但是在角形式我只得到单个对象数据，如何在搜索框中列出多个值？
component.ts：在这个组件中，我获取所有的值，但显示单个数据！
characters=[]；chars=[]；
ngOnInit() {
this.drugservice.getval().subscribe(
data => {
this.chars.data,
this.characters = [
{value: data[0].id},
浏览 4提问于2018-01-12得票数 0
回答已采纳
我正在使用ng-select进行下拉搜索，但如果不从下拉中选择任何内容，我将无法获得验证。我像咆哮着回来了：
<div class="form-group">
<ng-select [items]="productData" [searchable]="true" bindLabel="productName"
[formControl]="prodCode"
[ngClass]="{ 'is-invalid': submitted &&
浏览 28提问于2019-10-26得票数 7
我在angular中使用ng-select来加载一个列表。在搜索该项是否不可用时，我使用addTag将该项添加到数组中。但是该值没有设置为ng-select，函数也会被调用，但不能关闭添加标记条。下面是代码
items = [
{id: 1, name: 'Python'},
{id: 2, name: 'Node Js'},
{id: 3, name: 'Java'},
{id: 4, name: 'PHP', disabled: true},
{id: 5, name: 'Django'},
浏览 5提问于2021-01-21得票数 0
我有一个ng-选择组件。我想修剪输入文本，用户输入的作为s/he类型。我有下面的代码，我可以接受文本，用户类型，但我想不出一种方法，把修剪后的文本返回ng-select。
<ng-select #vehicleInfoSelect [allowClear]="true"
[(items)]="vehicleNumberList"
(selected)="vehicleNoSelected($event)"
(removed)="vehicleNoRemoved($event)"
(typed)=
浏览 1提问于2018-10-12得票数 0
我在keyup事件上使用具有自定义ajax搜索功能的Ng-select组件。
下面是我的代码：
<ng-select [items]="employes"
bindLabel="displayName"
[addTag]="false"
[multiple]="true"
[hideSelected]="true"
labelForId="employesmultiselect"
(keyup)="multiselectSearch($e
浏览 13提问于2018-08-02得票数 1
我不明白为什么在使用鼠标单击事件时，ng-select下拉输入文本会被选中，但在执行this.elementRef.nativeElement.click()操作时，却得不到选中的输入文本。
)
1.工作模式
<ng-select (click)="onClick($event)"></ng-select>
2.不工作
constructor(public element:ElementRef){}
triggetClickEvent(){
this.element.nativeElement.click();
}
单击事件方法：
onClic
浏览 9提问于2020-05-30得票数 0
回答已采纳
我的角5应用程序需要删除搜索框和清除从ng-选择x图标。
<ng-select [(ngModel)]="model" (change)="onChange($event)">
<section *ngFor="let x of userList;">
<ng-option value="{{x.id}}">
{{ x.name }}
</ng-option>
</section>
</ng
浏览 1提问于2019-02-28得票数 0
回答已采纳
4回答
我在可滚动的div中使用ng-select时遇到了问题。请找到屏幕截图-
问题:搜索文本框和下拉列表之间的差距越来越大，市中心应该与搜索输入框一起移动。要重现该问题-
单击第一个下拉列表(ng-select)。它将打开可用的选项。现在使用两个手指在笔记本电脑鼠标键盘上滚动/从鼠标滚动。
任何帮助都是非常感谢的。
提前谢谢。
浏览 8提问于2020-07-10得票数 1
如何删除@ng-select/ng-select模块中的ng-select-top
禁用@ng-select/ng-select模块中的顶部下拉列表
我想在@ng-select/ng-select模块中显示唯一的下拉式
浏览 1提问于2019-08-13得票数 0
回答已采纳
我正在使用ng选择库在我的角度web应用程序中显示一个下拉列表。
<ng-select
[items]="flattenedSelectList"
bindLabel="displayName"
placeholder="Select specialty"
notFoundText="No results found. Please try a different search criteria."
bindValue="id"
浏览 5提问于2020-07-08得票数 1
回答已采纳
2回答
我使用的是来自的ng-select组件。但是，在某些情况下，dropdown的内容太长。下拉列表中的字符串将缩短为...根据内容的长度，是否可以使dropdown大于输入宽度？可能使用CSS样式(自定义)。
<div layout="row">
<label>Your first ng-select</label>
<ng-select class="custom" [items]="cities"
bindLabel="name"
浏览 3提问于2018-05-02得票数 3
创建一个应用程序，其中我需要实现windows phone的锁定按钮功能。
任何人都知道当Lock按钮被按下时会触发哪个方法或事件。我尝试在各种名称空间中进行搜索，但都没有找到。
浏览 1提问于2015-08-20得票数 0
1回答
如何将用户控件放入ag-grid单元格编辑器中？
列定义：
{
headerName: 'Product',
field: 'product',
width: 140,
editable: true,
cellRendererFramework: ProductEditorComponent
},
和编辑器组件：
@Component({
selector: 'ag-product-editor-control'
浏览 0提问于2017-02-20得票数 0
我有两次跌落，两次跌落的数值相同。
在不同的组件中预订类和类服务下拉列表。
当我从预订类下拉列表中选择任何值时，它应该填写在“服务类”下拉列表中，并允许通过单击下拉列表更改该值。如果在“预订类”下拉列表中没有选择值，则服务下拉列表类可以保持原样。
从预订舱下拉菜单中选择头等舱后，当我进入服务下拉舱时，它应自动填写为头等舱。在单击下拉列表时，如果需要更改，列表应该是可见的。
订舱班
<div>
<label class="col-sm-2">{{'Booking Class' | transla
浏览 2提问于2021-03-27得票数 0
3回答
我有一个简单的组件，它实现了反应性表单，并设置了7个输入字段，它们是select输入。
我试图在其上应用一个验证器，以强制其中至少一个包含一个值。
组件：
renderForm() {
this.importForm = this.fb.group({
costCenter: [],
area: [],
silo: [],
department: [],
location: [],
segment: [],
ro
浏览 0提问于2017-07-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
