Javascript 仅添加所选芯片

我的目标是添加已选定的芯片。如果没有选项，则应通过键入的值添加芯片

所有

值都来自我的数据库。我的问题是，如果我键入某个内容并选择了一个选项，它将添加2个芯片

示例

值JavaScript存在于我的数据库中，它将显示为

。如果我键入Java（也可以是J），则会选择JavaScript。所以我想要的是只添加芯片JavaScript（因为它被选中），而不是两者。这就是它的样子：

HTML

{{currentTechnology.name}
取消
{{data.technology}

TypeScript

从'@angular/core'导入{Component，ElementRef，Input，OnInit，ViewChild}；
从“@angular/cdk/keycodes”导入{逗号、回车、空格、制表符}；
从“@angular/material”导入{MatAutocomplete，MatAutocompleteSelectedEvent，MatchiPiInputEvent}；
从“/technologies.service”导入{TechnologiesService}；
从“../sections/selection.service”导入{SelectionService}；
从'@angular/forms'导入{FormBuilder，FormControl，NgForm，Validators}；
从“../../../assets/json/countries.json”导入国家/地区；
@组成部分({
选择器：“应用程序窗体”，
templateUrl:'./form.component.html'，
样式URL:['./form.component.sass']
})
导出类FormComponent实现OnInit{
@ViewChild（'techInput'，{static:false}）techInput:ElementRef；
@ViewChild（'auto'，{static:false}）matAutocomplete:matAutocomplete；
@ViewChild（'customForm'，{static:true}）customForm:NgForm；
@Input（）部分：字符串；
separatoreyscodes=[逗号、空格、制表符、回车]；
可选=假；
可移动=真；
addOnBlur=true；
技术=[]；
工艺学；
currentTechnologies=[]；
minDate=新日期（）；
国家=国家；
//初级组
primaryFormGroup=this.fb.group({
标题：“”，
说明：“”，
性别：''，
城市：''，
国家：“，
语言：''，
高等教育：，
出生日期：''，
工作量：“”，
任务类型：“”，
时间：''，
付款时间：''，
明普莱斯：“，
maxPrice:“”，
来自“”的死线，
截止日期：''，
技术：''，
里程碑：[假，验证器。requiredTrue]
});
//重要形式组
importantFormGroup=this.fb.group({
性别：[假，验证器。requiredTrue]，
城市：[假，验证器。requiredTrue]，
国家：[错误，验证器。必需正确]，
语言：[false，Validators.requiredTrue]，
高等教育：[错误，验证器。必需正确]，
出生日期：[false，验证器。requiredTrue]，
工作负载：[false，Validators.requiredTrue]，
hourlyRate:[假，验证器。requiredTrue]，
paymentTime:[假，验证器。requiredTrue]
});
构造函数（私有技术服务：技术服务，私有选择：SelectionService，私有fb:FormBuilder）{}
//窗体控件
必需=新表单控件（“”，验证器。必需）；
hourlyRate=新表单控件（“”，Validators.max（200））；
恩戈尼尼特（）{
//设置最小日期
this.minDate=新日期（this.minDate.getFullYear（）、this.minDate.getMonth（）、this.minDate.getDate（））；
//修改表单对象
this.primaryFormGroup.valueChanges.subscribe（inputFields=>{
如果（输入字段）{
//改变技术
if（输入字段.技术）{
//inputFields.technologies=Array.from（this.setTechnologies）；
//删除inputFields.technologies；
}
//更改任务类型
const typeOfTask=inputFields.typeOfTask；
if（任务类型）{
如果（任务类型===“项目”）{
inputFields.project=1；
}else if（任务类型==='feature'）{
inputFields.feature=1；
}else if（typeOfTask==='bugfix'）{
inputFields.bugfix=1；
}else if（typeOfTask==“其他”）{
inputFields.other=1；
}
删除inputFields.typeOfTask；
}
//换技术
constInputEntries=Object.entries（inputFields.filter）（[key，value]）=>value）；
//log（'result:'，inpunterties）；
}
});
}
//获取当前节
getSelectedSection（）{
返回此.selection.getSection（）；
}
//在关键时刻，展示技术
onKeyUp（事件：任意）：无效{
if（event.target.value.trim（）.length>0）{
this.technologyservice.getTechnologies（event.target.value）
.订阅（数据=>{
if（JSON.stringify（this.technologies）！==JSON.stringify（data））{
这就是技术=数据；
}
});
}
}
//在输入时，添加技术
onEnter（evt：任何）{
如果（evt.source.selected）{
添加（evt.source）；
evt.source.value=''；
}
}
//添加技术
添加（事件：MatChipInputEvent）：无效{
如果（！this.matAutocomplete.isOpen）{
console.log（'add'）；
常量输入=event.input；
常量值=event.value；
如果（（值| |“”）.trim（））{
//例如，{“name”：“Java”}
this.currentTechnologies.push（{name:value.trim（）}）；
//设置没有密钥的技术
如果（这是设置技术）{
这个.setTechnologies.add（value）；
}否则{
this.setTechnologies=new Set（）；
这个.setTechnologies.add（value）；
}
}
//重置输入值
如果（输入）{
event.input.value=''；
}
}
}
//选择自动完成选项
已选择（事件：MatAutocompleteSelectedEvent）：无效{
console.log（'select'）；
if（！JSON.stringify（this.currentTechnologies）.includes（`{“name”：“${this.techInput.nativeElement.value.trim（）}”`））{
this.currentTechnologies.push（{name:this.techInput.nativeElement.value.trim（）}）；
this.techInput.nativeElement.value=''；
}
}
//