ahmed elbarbary

ahmed elbarbary

  • NA
  • 1.6k
  • 277.8k

data not display when click on auto complete text box angular 7

Jun 1 2021 1:12 AM

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

  1. constructor(private http: HttpClient,private _dataService: DeliverySysService) {  
  2.     this._dataService.getExport().subscribe(data => { this.ExportOptions = data   
  3.         console.log(this.ExportOptions)  
  4.     });  
  5.   
  6. this display data  as below :  
  7.   
  8. (5) [{…}, {…}, {…}, {…}, {…}]  
  9. 0: {optionID: 1, optionName: "Export"}  
  10. 1: {optionID: 2, optionName: "Export Normalized"}  
  11. 2: {optionID: 3, optionName: "Export Normalized New"}  
  12. 3: {optionID: 4, optionName: "Export Normalized Relation"}  
  13. 4: {optionID: 5, optionName: "Export Nxp Comptitor"}  

Now use ng -autocomplete tool so I do the following :

on Delivery System Component html component

  1. <div #templ class="ng-autocomplete" style="width:300px; z-index: 5;">  
  2.         <ng-autocomplete #auto [data]="exportOptions" [initialValue]="" [searchKeyword]="keyword" [placeHolder]="placeholder"  
  3.           [itemTemplate]="itemTemplate" [notFoundTemplate]="notFoundTemplate" notFoundText="Not found"  
  4.           (selected)='selectEvent($event)' (inputChanged)='onChangeSearch($event)'>  
  5.         </ng-autocomplete>  
  6.         <ng-template #itemTemplate let-item>  
  7.           <a [innerHTML]="item.Text"></a>  
  8.         </ng-template>  
  9.         <ng-template #notFoundTemplate let-notFound>  
  10.           <div [innerHTML]="notFound"></div>  
  11.         </ng-template>  
  12.       </div>  
  13.   
  14.   
  15. on DeliverySystemComponent.ts component  
  16.   
  17. export class DeliverySystemComponent implements OnInit {  
  18.    
  19.     keyword = 'Text';  
  20.     public placeholder: string = 'Enter Name';  
  21.         public Down: string = "";   
  22.     public ID: number = 0;  
  23.     public SP: string = "";  
  24.   
  25. onChangeSearch(val: string) {  
  26.     this.Down = "";  
  27. }  
  28. selectEvent(item) {  
  29.     console.log(item);  
  30.     this.Down = "";  
  31.     this.Down = item.Template;  
  32.     this.ID = item.optionID;  
  33.     this.SP = item.optionName;  
  34.     this.TOut = item.OutTemplate;  
  35. }  

so when click on auto complete text box I expect to display

Export Export Normalized Export Normalized New Export Normalized Relation Export Nxp Comptitor 

Option Name Not display


Answers (1)