typescript 如果在Angular 列表中未找到,则显示创建值

kgqe7b3p  于 2023-01-14  发布在  TypeScript
关注(0)|答案(1)|浏览(117)

我有一个列表。如果用户使用搜索没有在此列表中找到值,则需要向他显示"创建值"组件。如何比较搜索输入的值与列表中的值?如果没有匹配项,则需要显示"创建值"组件。

.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});
    }
kmbjn2e3

kmbjn2e31#

我使用了find方法,现在,如果数组中不存在搜索值,我将显示create-value组件。
TS:

isSearchValueMode = false;
            
            if (this.values.find(elem => elem.title === this.searchQuery)){
                this.isSearchValueMode = false;
            }else{
                this.isSearchValueMode = true;
            }

超文本:

.create-value(
    '*ngIf'='searchQuery && isValuesMode && ["Dropdown", "Multiselect"].includes(selectedFieldType) && isSearchValueMode'
    '[ngClass]'='{"active":!searchValues.length}'
    '(click)'='onQuickCreateFieldValue($event)'
)

相关问题