Angular2 @Input：将对象数组从父组件传递到子组件

Question

I need some help with angular 2. Is it possible to pass an objects array from parent to child component? It seems its not possible, But maybe i missed something. Below you could see a summary what ive been trying in my code.

parent.component.ts
-----------------------------------------

@Component({
    template: `
        <child dataset="{{ people }}"></child>  
    `,
})

export class ParentComponent{

    private people: any[] = [
        { name: 'jimmy', age: 22, gender: 'male' },
        { name: 'johnny', age: 23, gender: 'male' },
        { name: 'danny', age: 24, gender: 'male' }
    ];

}


child.component.ts
-----------------------------------------
export class ChildComponent implements OnInit{

@Input() private dataset: any[] = [];

    ngOnInit() {
        console.log(this.dataset);
    }  

}


console
-----------------------------------------
[object Object],[object Object],[object Object]

Answer 1

The interpolation like dataset="{{ people }}"> is always stringified while the value of basic property binding [dataset]="people" is passed as is.

So you need to replace interpolation with:

[dataset]="people"

See also

• What's the difference between `value="{{todo.title}}"` and `[value]="todo.title"`?
• https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.6umy3rw04