无法以 ng 选择角度编辑项目选择后的项目

Question

我正在使用ng-select

https://www.npmjs.com/package/@ng-select/ng-select

我的 Angular 项目中的 npm 库。 它正在处理大数据，没有任何问题。

但是我无法编辑所选项目，并且一旦选择了该项目，导航键在输入框中就不起作用。

例如，我首先搜索了某些内容12，然后我必须选择某些内容31。在这种情况下，我无法清除最后两个字符。 要更改搜索内容，我必须清除整个文本并再次重新键入以进行新搜索。

版本：

ng-select 2.16.4
angular 7.2.2

Answer 1

Pure Html 和 Css 解决方案，以防您需要

选项 1

.select-editable {
position:relative;
background-color:white;
border:solid grey 1px;
width:120px;
height:18px;
}
.select-editable select {
position:absolute;
top:0px;
left:0px;
font-size:14px;
border:none;
width:120px;
margin:0;
}
.select-editable input {
position:absolute;
top:0px;
left:0px;
width:100px;
padding:1px;
font-size:12px;
border:none;
}
.select-editable select:focus, .select-editable input:focus {
outline:none;
}

<div class="select-editable">
<select onchange="this.nextElementSibling.value=this.value">
<option value=""></option>
<option value="115x175 mm">115x175 mm</option>
<option value="120x160 mm">120x160 mm</option>
<option value="120x287 mm">120x287 mm</option>
</select>
<input type="text" name="format" value="" />
</div>

选项 2

<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
(click once to focus and edit, click again to see option dropdown)

最后但并非最不重要的可能是这会帮助你 角度可编辑下拉列表 - 根据所选值进行编辑

Answer 2

首先你需要添加：

[multiple]="false"
[editableSearchTerm]="true"
to your ng-select

在您需要为可编辑项目使用自定义模板后：

<ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
<span class="ng-value-label" >{{item.name}}  {{item.id}}</span>
</ng-template>