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对象完全为空。

可能的原因是什么？

推断

我认为创建的Array比HTTP GET返回的Promise更早传递，也许filterJSON可能是空的。

信息

子组件只是CSS Box，它与上面提到的JSON中的Data一起显示。在一般情况下，只需点击特定位置即可显示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

Object中的对象未传递给Angular-2 Typescript中的Child Component

推断

信息

1 个答案: