I work on angular 7 project
I face issue I can't display option Name when click on auto complete textbox
so when click on auto complete text box it not display any thing and not show data related to option Name
and that actually my issue
so How to solve this issue
constructor(private http: HttpClient,private _dataService: DeliverySysService) { this._dataService.getExport().subscribe(data => { this.ExportOptions = data console.log(this.ExportOptions) }); this display data as below : (5) [{…}, {…}, {…}, {…}, {…}] 0: {optionID: 1, optionName: "Export"} 1: {optionID: 2, optionName: "Export Normalized"} 2: {optionID: 3, optionName: "Export Normalized New"} 3: {optionID: 4, optionName: "Export Normalized Relation"} 4: {optionID: 5, optionName: "Export Nxp Comptitor"}
Now use ng -autocomplete tool so I do the following :
on Delivery System Component html component
<div #templ class="ng-autocomplete" style="width:300px; z-index: 5;"> <ng-autocomplete #auto [data]="exportOptions" [initialValue]="" [searchKeyword]="keyword" [placeHolder]="placeholder" [itemTemplate]="itemTemplate" [notFoundTemplate]="notFoundTemplate" notFoundText="Not found" (selected)='selectEvent($event)' (inputChanged)='onChangeSearch($event)'> </ng-autocomplete> <ng-template #itemTemplate let-item> <a [innerHTML]="item.Text"></a> </ng-template> <ng-template #notFoundTemplate let-notFound> <div [innerHTML]="notFound"></div> </ng-template> </div> on DeliverySystemComponent.ts component export class DeliverySystemComponent implements OnInit { keyword = 'Text'; public placeholder: string = 'Enter Name'; public Down: string = ""; public ID: number = 0; public SP: string = ""; onChangeSearch(val: string) { this.Down = ""; } selectEvent(item) { console.log(item); this.Down = ""; this.Down = item.Template; this.ID = item.optionID; this.SP = item.optionName; this.TOut = item.OutTemplate; }
so when click on auto complete text box I expect to display
Export Export Normalized Export Normalized New Export Normalized Relation Export Nxp Comptitor