javascript - Passing array of objects from angular template to another component using @input - Stack Overflow

admin管理员组

文章数量:1290377

I am trying to pass an array of objects through angular template from one ponent to another one.

 <div *ngFor="let item of data">
    <div class="col-xl-3">
      <top-users  usersData ={{[item]}}> </top-users>
    </div>
  </div>

item here supposed to be

[{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}]

and the data is array of array of objects

[    
 [{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}],
 [{id:3, name: 'Ahmed'}, {id:4, name:'Mohammed'}],
 [{id:5, name: 'Ahmed'}, {id:6, name:'Mohammed'}]
]

When I receive the variable through @input parameter, I get the result typeof string and looks like this

[object Object],[object Object]

I tried to parseJson and gives me this error

ERROR SyntaxError: Unexpected token o in JSON at position 1

What should I do to get the right array of object?

I am trying to pass an array of objects through angular template from one ponent to another one.

 <div *ngFor="let item of data">
    <div class="col-xl-3">
      <top-users  usersData ={{[item]}}> </top-users>
    </div>
  </div>

item here supposed to be

[{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}]

and the data is array of array of objects

[    
 [{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}],
 [{id:3, name: 'Ahmed'}, {id:4, name:'Mohammed'}],
 [{id:5, name: 'Ahmed'}, {id:6, name:'Mohammed'}]
]

When I receive the variable through @input parameter, I get the result typeof string and looks like this

[object Object],[object Object]

I tried to parseJson and gives me this error

ERROR SyntaxError: Unexpected token o in JSON at position 1

What should I do to get the right array of object?

• javascript
• angular6

Share Improve this question Follow asked Apr 11, 2019 at 7:52 palAlaapalAlaa 9,8783333 gold badges109109 silver badges170170 bronze badges 1

• I dont think [item] is a right way. it should be item. tried to keep it simple this will reduce bugs. – Hoang Subin Commented Apr 11, 2019 at 8:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You need to pass the data as below :

<div *ngFor="let item of data">
    <div class="col-xl-3">
      <top-users  [usersData]="item"> </top-users>
    </div>
  </div>

You will receive in child ponent as:

@Input() usersData;

usersData will look like:

[{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}]

I had the same problem. I created the file with strict on, so I modified the strict to false in tsconfig.json file.

"pilerOptions": {
  "strict": false,

And also tried:

 "pilerOptions": {
   "noImplicitUseStrict": true, 

If you don't find strict just add it, don't forget to add ma(,) after "strict": false,. Next time create the file with -no--strict. ex. ng new fileName -no--strict

本文标签： javascriptPassing array of objects from angular template to another component using inputStack Overflow