我有一个列表。如果用户使用搜索没有在此列表中找到值,则需要向他显示"创建值"组件。如何比较搜索输入的值与列表中的值?如果没有匹配项,则需要显示"创建值"组件。
.create-value(
'*ngIf'='searchQuery && isValuesMode && ["Dropdown", "Multiselect"].includes(selectedFieldType) && !searchValues.length'
'[ngClass]'='{"active":!searchValues.length}'
'(click)'='onQuickCreateFieldValue($event)'
)
.text CREATE VALUE
info-item
.custom-icon('[ngStyle]'="{'background-color': DEFAULT_COLOR}")
info-item-text.in-dropdown('[text]'='searchQuery')
dynamic-list(
'*ngIf'="!isValuesMode || ['Person', 'Dropdown', 'Multiselect'].includes(selectedFieldType)"
'[mode]'='selectedFieldType === "Multiselect" ? "multi" : "single"'
'[options]'='isValuesMode ? searchValues : fields | fieldOptions : searchQuery'
'[searchQuery]'='searchQuery'
'[keydownEvents$]'='keydownEvents$'
'[ngStyle]'='{"height": isWithSearch ? "240px" : "280px"}'
'[optionTemplateRef]'='isValuesMode ? optionTemplateValues : optionTemplateList'
'(action)'='onAction($event)'
'(closeList)'='closeList.emit()'
)
onSearch(query: string): void {
if (!this.isValuesMode) {
this.search.emit(query);
} else {
if (query) {
switch (this.selectedFieldType) {
case 'Person':
this.searchValues = this.values.filter(elem => {
const name = this.teamMap[elem.title].firstName + ' ' + this.teamMap[elem.title].lastName;
return name.toLowerCase().includes(query.toLowerCase());
});
break;
case 'Dropdown':
case 'Multiselect':
this.searchValues = this.values.filter(elem => elem.title.toLowerCase().includes(query.toLowerCase()));
break;
}
this.cdRef.markForCheck();
} else {
this.searchValues = this.values;
this.cdRef.markForCheck();
}
}
this.searchQuery = query;
}
onQuickCreateFieldValue(event: MouseEvent): void {
const newValue = {
title: this.searchQuery,
properties: [
{
name: 'sequence',
value: this.selectedField.values.length.toString()
},
{
name: 'color',
value: this.DEFAULT_COLOR
}
]
};
this.quickCreateFieldValue.emit({value: newValue, selectedField: this.selectedField, projectId: this.entity.projectId});
}
1条答案
按热度按时间kmbjn2e31#
我使用了find方法,现在,如果数组中不存在搜索值,我将显示create-value组件。
TS:
超文本: