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

Question

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.

You are trying to assign this.taglist[0] which is an Object to blankRow.ID1 which you expect to be a string? Try assigning this.taglist[0].tag instead — shyam
– shyam, Commented Jul 20, 2020 at 10:34

surendra kumar · Accepted Answer · 2020-07-20 12:19:53Z

1

Change to below code.

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

answered Jul 20, 2020 at 12:19

surendra kumar

1,78012 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sanket Raval Over a year ago

Thanks for your response. Actually I need to push object itself with its tag so I am using this.tagist[0]. Backend logic I have that will read the string and assign it. As I already mentioned, the same logic works when I use the plus button (to add dynamic table entries) and add row dynamically. problems occur only when I push array programmatically from the backend.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related