对象内的对象未传递给Angular-2 Typescript中的子组件

Question

在我的Angular 2.4 Typescript代码中有以下JSON对象

variableJSON = 
{
  'fQuery': string,
  'fQueryRoot': string,
  'fQueryRootURL': string,
  'fName': string,
  'filterJSON': Object
}

例如，filterJSON对象通过HTTP GET响应(基于Promise)存储：

this.service.get(URL).then(
 // whatever is returned from promise is stored in the above JSON
res => this.variableJSON['filterJSON'] = res);

我在数组中推送上述variableJSON，并将其传递给我的子组件，如下所示：

<child-comp *ngFor="let eachFilter of arrayPassingToChild" [filterProperties]="eachFilter">
<!-- assuming eachFilter is the exact variableJSON mentioned Above passed to child -->
</child-comp>

当我在父组件上执行控制台日志时，推送到数组的对象将完全显示filterJSON对象。相反，当我在控制台登录filterProperties时，它是子组件中的一个@Input()：

我得到了所有的字符串。fQuery ..等等，但是filterJSON对象是完全空的。

可能的原因是什么？

推理

我假设创建的数组比HTTP GET返回的Promise更早传递，也许filterJSON是空的。

信息

子组件只是CSS框，它与上述JSON中的数据一起显示。在一般情况下，当单击特定位置时，会出现CSS框。

Answer 1

只要你传入的是真实的数据，而不仅仅是数据的接口，你就会得到它。

这是一个可以脱掉的柱塞。

http://plnkr.co/edit/4TRbOejaUmhDmI170aPI?p=preview

应用程序组件

@Component({
  selector: 'my-app',
  template: `
    <div>App Started</div>
    <child-component [data]="point" *ngFor="let point of data"></child-component>
  `,
})
export class AppComponent {
  constructor() {
    this.data = [{
      point : 0
    },{
      point : 1
    },{
      point : 2
    }]
  }
}

子组件

@Component({
  selector: 'child-component',
  template: `
   <div>Got Data Point {{data.point}}</div>
  `,
})
export class ChildComponent {
   @Input() data;
  constructor() {
  }
}

输出

App Started
Got Data Point 0
Got Data Point 1
Got Data Point 2