how to bind array in an object in angular 4 dynamicaly

Sujeet Raman

8y5.6kTypeScript

Hi i am having a json object and an arraylist inside it

this.cars = [

{

"carOwner": "foo",

"carList": [

{

"Name": "honda",

"value": 2000

{

"Name": "bmw",

"value": 4440

}

]

}

];

i have to bind name and value how can i bind array in an object

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Kaushik Dhameliya8y ago
Accepted answer
Hello Kartik

You can use array this way
<div *ngFor="let objCars of cars">
    <h1>objCars.carOwnerh1>
    <div *ngFor="let objCarList of objCars.carList">
      <span>{{ objCarList.Name }}span>
      <span>{{ objCarList.value }}span>
    div>
div>
+2
Manav Pandya8y ago
Hello

Yes you are getting this bcoz name property set to be same for all

Just make change as below :
"text" value="{{details.value}}" [ngModel]="details.value" name={{details.value}}>
Bcoz value of ngModel and name should be same to get exact value
Thanks
+1
Sujeet Raman8y ago
@manav

i used

but still last value is binding all the textbox
0
Manav Pandya8y ago
Hello @Karthik

If you just want to display than no need to use ngModel

But yes if you want to do two-way data binding using [ngModel]

like :
"text" value="{{details.value}}" [ngModel]="details.value">

Just do R & D on this and you will get to know about that
Thanks
+1
Manav Pandya8y ago
Hello @Kaushik

I have observed that you have copied my content and uploaded into your html file

That's not the way to provide solution , i have implemented solution by my own , you can try with different ways

@Kartik

No need to use ngModel , i have provided runnable solution with output , check it out

I hope you will find my answer helpful

Thanks
+1
Kaushik Dhameliya8y ago
Hello Karthik

check this

https://stackblitz.com/edit/errorhandle?file=app%2Fapp.component.ts
0
Manav Pandya8y ago
Hello

Your question : How to generate dynamic textbox :

Lets assume you have 2 items in array than you can do like below :
<div *ngFor="let mycars of cars;let i=index">
  <div *ngFor="let details of mycars.carList">


    {{details.Name}} :


    <input type="text" value="{{details.value}}"> <br><br>

  div>
div>
Output
I have developed complete CRUD operation using Array only

- Add items into array , update item of array , than how to display array item and also delete it

Just follow below link :

https://www.c-sharpcorner.com/article/crud-using-array-in-angular-5/

I hope CRUD operation will help you to understand complete procedure to play with array

Thanks
+1
Sujeet Raman8y ago
Got it..i need to show the value in a text box.but this text box shoud create dynamicaly based on how much name& value in the arraylist..how can i create dynamic text box based on number of "value"??as am new to angular facing issue..can u help on this also??
+1