Вместо моего значения параметра списка данных я вижу только «[Объект объекта]», я пытался передать json следующим образом:
{{element.objectTitle | 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>
Вы получаете строковое значение "[Object object]"
из-за текущего использования элемента управления. Элемент управления ngModel
используется в элементе input
, а это означает, что он может хранить только строковое значение. Именно то, что вы получаете.
Чтобы сохранить значение выбранного объекта, просто создайте другое свойство и проверьте его при необходимости:
selectedElement: any;
...
selectedValue: any;
public saveCode(e): void {
const name = this.selectedElement;
const element = this.list.find(x => x.objectTitle === name);
this.selectedValue = element;
}