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"}
so when click on auto complete text box I expect to display
Export
Export Normalized
Export Normalized New
Export Normalized Relation
Export Nxp Comptitor
What I have tried:
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;
}