小编Mar*_*tra的帖子

我正在开发一个大型应用程序,我在处理来自API的数据并将其传递给我的子组件时遇到了很多麻烦.

情况.

我从父组件调用我的API,并通过prop将数据传递给我的子组件.子组件显示数据就好了,但是我无法访问子组件中ready函数中的数据.

看看:https://jsfiddle.net/kmrfkynf/3/

正如您在控制台中看到的那样,在子组件就绪函数中显示数据会给我一个空对象...

ready: function(){
    console.log('items from child component', this.items);
}

...但是子组件在重复中呈现对象就好了.

所以问题是在父调用API调用完成之前呈现子组件.完成后,它会将数据同步到我的子组件,因此渲染得很好.

我试过的

从我的孩子组件中看到道具.当道具"完整"时,我可以访问它.但是当尝试修改道具中的某些数据时,这会给我带来很多问题,因为它每次都会渲染.这不是我想要的解决方案.

这个问题

当子组件准备好时,如何确保支撑被填充？

我从Angular2中的服务中检索对象列表.

点击后我想把我的ngFor中的对象放到一个新的数组上(使用相同的界面).

我能够很好地显示列表中的项目.我也能够显示我在控制台中选择的项目,但是我无法将此对象推送到具有相同界面的新阵列中.

我的界面:

export interface Item {
    id: string,
    name: string,
    icon_url: string,
    exterior: string,
    type: string,
    tag: string,
    addedClass: string,
    selected: boolean
}

我的组件:

import {Component, OnInit, DoCheck} from 'angular2/core';
import {Item} from './../interfaces/interfaces.ts';
import {ItemService} from './../services/item.service.ts';


@Component({
    template: `
        <h2>Add item</h2>
        <div class="itemlist">
            <ul class="items">
                <li 
                    *ngFor="#item of items"
                    [class.selected]="item === selectedItem"
                    (click)="onSelect(item)"
                >
                    <span class="item">
                        {{item.name}}
                    </span>
                </li>
            </ul>
        </div>
    `
})

export class AddTradeComponent implements OnInit {

    public items: Item[];
    public selectedItems: Item[];


    constructor(private …