Angular自定义组件中datalist显示[Object object]而非实际值求助

问题描述 #

将自动完成下拉功能封装为自定义组件后，datalist的选项不再显示实际文本值，仅显示"[Object object]"，尝试使用json管道也无法解决该问题，未封装为自定义组件时功能正常。

原代码 #

自定义组件HTML #

<div style="position: relative;" class="fk-col-8">
    <input id="profileInput" type="text" class="input" list="profiles" onfocus="this.value=''"
        [(ngModel)]="selectedElement" (change)="saveCode($event)" (click)="changeSlide()">
    <i class="bz-chevron-down icon arrow" [class.clicked]="slideOpen"></i>

    <datalist id="profiles">
        <option *ngFor="let element of list" [value]="element.objectTitle">
            {{element.objectTitle}}</option>
    </datalist>
</div>

自定义组件TS #

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'app-autocomplete-dropdown',
    templateUrl: './autocomplete-dropdown.component.html',
    styleUrls: ['./autocomplete-dropdown.component.scss']
})
export class AutocompleteDropdownComponent implements OnInit {

    @Input()
    list: any;

    selectedElement: any;

    slideOpen: any = false;

    public saveCode(e): void {
        let name = e.target.value;
        let element = this.list.filter(x => x.objectTitle === name)[0];
        this.selectedElement = element;
    }

    changeSlide(): void {
        this.slideOpen = !this.slideOpen;
    }

}

组件调用 #

<app-autocomplete-dropdown [list]="profiloList"></app-autocomplete-dropdown>

问题原因 #

核心问题在于[(ngModel)]直接绑定了selectedElement对象：

• input元素的value属性会自动将绑定的对象转为字符串，即"[Object object]"，导致显示异常
• datalist的option绑定的是element.objectTitle字符串，与ngModel绑定的对象类型不匹配，无法正确关联

解决方案 #

拆分双向绑定，分别处理显示文本和选中对象的赋值：

• 用[ngModel]绑定选中对象的objectTitle属性，负责显示文本
• 用(ngModelChange)监听输入变化，匹配并赋值对应的对象

修改后的代码 #

自定义组件HTML

<div style="position: relative;" class="fk-col-8">
    <input id="profileInput" type="text" class="input" list="profiles" onfocus="this.value=''"
        [ngModel]="selectedElement?.objectTitle" (ngModelChange)="onInputChange($event)" (click)="changeSlide()">
    <i class="bz-chevron-down icon arrow" [class.clicked]="slideOpen"></i>

    <datalist id="profiles">
        <option *ngFor="let element of list" [value]="element.objectTitle">
            {{element.objectTitle}}</option>
    </datalist>
</div>

自定义组件TS

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'app-autocomplete-dropdown',
    templateUrl: './autocomplete-dropdown.component.html',
    styleUrls: ['./autocomplete-dropdown.component.scss']
})
export class AutocompleteDropdownComponent implements OnInit {

    @Input()
    list: any[];

    selectedElement: any;

    slideOpen: boolean = false;

    ngOnInit(): void {}

    onInputChange(value: string): void {
        if (!value) {
            this.selectedElement = null;
            return;
        }
        // 使用find替代filter[0]，性能更优
        this.selectedElement = this.list.find(x => x.objectTitle === value);
    }

    changeSlide(): void {
        this.slideOpen = !this.slideOpen;
    }

}

关键修改点 #

1. 拆分双向绑定：将[(ngModel)]拆分为[ngModel]="selectedElement?.objectTitle"和(ngModelChange)="onInputChange($event)"，分离显示逻辑和对象赋值逻辑
2. 优化对象匹配：用find方法替代filter[0]，直接返回匹配的第一个对象，效率更高
3. 类型规范：将list的类型声明为any[]，slideOpen声明为boolean，增强类型安全性
4. 空值处理：当输入为空时，清空selectedElement，避免无效匹配

内容的提问来源于stack exchange，提问作者user18772237