why menu add space as white space blank on drop down ?

Question

why menu add space as white space blank on drop down ? I work on angular 7 i found drop down display white space on drop down so that why and how to solve that class = 'form-group' style= 'display: flex; align-items: center;margin-top:10px;margin-left:20px;' > 'let fil of FilterList' style= 'padding-bottom: 10px;margin-right: 10px;' > {{fil.controlName | slice:3:15}} '{{fil.controlName}}' (change)= 'onChange($event)' class = 'form-control' style= 'width:200px; margin-right:10px;' > '0' >-Select- 'let fil2 of this.FilterBinddata' > 'fil.controlName===fil2.filterName ' > {{fil2.reportSource}}

Siddharth Gajbhiye · Answer

Assign filter list as an array modal public FilterList: FilterList[] = []; Class FilterList{ 'controlName' :string } try like this

ahmed elbarbary · Answer

this statment have error so how to solve it this .FilterList.controlName.length

ahmed elbarbary · Answer

thank you for reply for loop will return only one item from fiterlist because i dont have accumlation variable store data so how to solve that please ?

Siddharth Gajbhiye · Answer

for ( var i=0;i this .FilterList.controlName.length;i++) { this .getdatabind= this .FilterBinddata.filter(x=>x.filterName === this .FilterList[i].controlName) } iterate like this and your error will gone

ahmed elbarbary · Answer

thank you for reply FilterList:any[]=[]; FilterBindata:any[]=[]; tempFilter:any[]=[]; this ._displayreport.GetReportFilteresById(param2).subscribe((data: any[]) => { this .FilterList = data; }); this ._displayreport.GetReportFilterBind(param2).subscribe((data2: any[]) => { this .FilterBinddata = data2; this .tempFilter = this .FilterBinddata.filter(x=>x.filterName== this .FilterList.controlName) here problem on tempFilter how to store on it . it make red line under this.FilterList.controlName

Siddharth Gajbhiye · Answer

Ok So try with this one filterlist :any[]=[]; If possible send me your code i will check and change it for u Thank you

ahmed elbarbary · Answer

i need to do that but how for (var i=0;i this .FilterList.controlName.length;i++) { this .getdatabind= this .FilterBinddata.filter(x=>x.filterName === this .FilterList[i].controlName) } it give me property control name doesnot exist on type any

ahmed elbarbary · Answer

this.tempfilter=this.FilterBinddata.filter(x=>x.filterName === this.FilterList[1].controlName) thank you for reply filterlist :any[] this .filterlist.controlName return two control ddlcompany and ddlregulation I need top loop to all data on filterlist then assign to filtername so How to make loop on filterlist to assign data on filtername

Siddharth Gajbhiye · Answer

Hello Ahmed At the time you are checking in *ngIf if returns false then a blank row will add because you are giving nothing for that see your code will look like this option * ngFor = "let fil2 of this.FilterBinddata" > div * ngIf = "fil.controlName===fil2.filterName " > //If False it will hide this one for one iteration {{fil2.reportSource}} div > option > means nothing will going to display here option * ngFor = "let fil2 of this.FilterBinddata" > option > So its better to do one thing you should filter it in typescript and assign the data in an array and do iteration this .tempFilter= this .FilterBinddata.filter(x=>x.FilterList.controlName === FilterBinddata.filterName) option * ngFor = "let fil2 of this.tempFilter" > {{fil2.reportSource}} option > Hope it will work Thakyou

ahmed elbarbary · Answer

can any one help me please

Salman Beg · Answer

Check this link, https://dzone.com/articles/angularjs-dropdown-automatically-add-a-empty-value

why menu add space as white space blank on drop down ?

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (11)