我使用 html 標記資料串列創建了一個用于自動完成下拉串列的自定義組件，現在如何將物件保存在我呼叫其選擇器的組件中？我嘗試使用[(ngModel)]但物件未定義。我該如何解決？提前致謝。
我將值保存在自定義組件中，但現在我必須將它帶到我呼叫它的組件中。
通過選擇器呼叫下拉組件
<app-autocomplete-dropdown [list]="profiloList"></app-autocomplete-dropdown>
我的自定義組件 .HTML
<input type="text" class="input" list="list" onfocus="this.value=''" [(ngModel)]="selectedTitle" (change)="saveElement($event)" (click)="slideOpen = !slideOpen">
<i class="bz-chevron-down icon arrow" [class.clicked]="slideOpen"></i>
<datalist id="list">
<option *ngFor="let element of list" [value]="element.objectTitle">{{element.objectTitle}}</option>
</datalist>
我的自定義組件 .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;
selectedTitle?: String;
slideOpen: any = false;
public saveElement(e): void {
let name = e.target.value;
let element = this.list.filter(x => x.objectTitle === name)[0];
this.selectedElement = element;
this.selectedTitle = element.objectTitle;
if (this.selectedElement == undefined) {
e.target.value = "";
}
}
}
uj5u.com熱心網友回復：
您可以實作@OutputEventEmitter 并將新值發送給父級，例如
@Output()
selected = new EventEmitter<YourElementType>();
...
this.selected.emit(listElement)
之后，您可以使用將串列存盤在父組件中
<app-autocomplete-dropdown [list]="profiloList" (selected)="this.selectedItem = $event"></app-autocomplete-dropdown>
注意：
您應該避免使用any型別。為您的型別定義一個介面并相應地使用它。從長遠來看，這將對您有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532611.html
標籤：有角度的
上一篇：如何為表格表示準備資料？