CODEWITHSUNDEEP
angulardynamicdrop-down-menu
Sanket Raval
Sanket Raval

Reputation: 29

Dropdown list added but text inside coming empty while using array.push from another component in angular 9

I want to add a dropdown list from XML/JSON file. I am able to add dropdown dynamically using the add button but I want to update dropdown programmatically from the backend. My code for adding dropdown dynamically.

blankRow()
{
   ID1: string;
   ID2: string;
}

taglist: Array<any> = [       
      {tag : "test_string"},
      {tag : "test_string1"},
      {tag : "test_string2"},
      {tag : "test_string3"},
      ];

const blankRow= new blankRow();
        blankRow.ID1= this.taglist[0],
        blankRow.ID2 = this.taglist[1],
        
        this.mypage.DataList.push(blankRow);

HTML code:

   <select [(ngModel)]="mypage.DataList[i].ID1" [ngModelOptions]="{standalone: true}">   
     <option *ngFor="let x of taglist; trackBy:trackByIndex; " [id]="x"  [ngValue]="x">{{x.tag}}</option>
   </select>

with the above logic, I am able to add dropdown using add button but same I want to add from backend from another component as below:

from another complement doing the same thing:

taglist: Array<any> = [       
    {tag : "test_string"},
    {tag : "test_string1"},
    {tag : "test_string2"},
    {tag : "test_string3"},
    ];

const blankRow= new blankRow();
      blankRow.ID1= this.taglist[0],
      blankRow.ID2 = this.taglist[1],
        
     var temp = getdatalist();
     temp.push(blankRow);
     setdatalist(temp);

I have subscribed to changes on Datalist and with the above code, the dropdown is added but text inside is coming empty. as below. However, when put console logs, I can see data accurately coming into the console. this is an issue, an empty box is coming

I know the issue might be a reference lost when updating data from another source, but I don't know the solution. I have tried track by option as well. Help is appreciated, thanks in advance.

Upvotes: 0

Views: 238

Answers (1)

surendra kumar
surendra kumar

Reputation: 1780

Change to below code.

  blankRow.ID1= this.taglist[0].tag,
  blankRow.ID2 = this.taglist[1].tag,

Upvotes: 1

Related Questions