Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
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

TypeScript
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

TypeScript
<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;
}
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900