javascript - 我的 @Input() 没有在我的 Angular 2 应用程序中传递信息

Question

在我的 Angular2 应用程序中，我有一个子组件，其中我使用 @Input() 从父组件传递信息。在我的父组件 View /HTML 中，我绑定(bind)到子组件选择器并传递来自父组件的信息。父组件 View 代码如下所示:

<div class="page-view">
    <div class="page-view-left">
        <admin-left-panel></admin-left-panel>
    </div>
    <div class="page-view-right">
        <div class="page-content">
            <admin-tabs></admin-tabs>
            <table-display [APICall]="accountCall"></table-display>
        </div>
    </div>
</div>

然后，对于组件文件，我有相关的代码，它显示了在我的 ngOnInit 中调用的服务函数。我将其保存在变量“accountCall”中。这就是我在子组件选择器“table-display [APICall]="accountCall”的上述 View 中绑定(bind)的值:

ngOnInit() {
    this.accountCall = this.localAccountService.getByStage()
        .subscribe(resRecordsData => this.records = resRecordsData,
        responseRecordsError => this.errorMsg = responseRecordsError);
}

然后，在名为“table-display”的子组件中，我使用 @Input() 传递“APICall” - (即它知道它)。相关组件代码如下:

@Component({
  selector: 'table-display',
  templateUrl: './table-display.component.html',
  styleUrls: ['./table-display.component.less']
})
export class TableDisplayComponent implements OnInit {

    @Input() APICall;

无论出于何种原因，这都行不通。我没有收到错误。我只是没有将任何数据填充到页面中。

此外，仅供引用，当我直接传递服务调用时，这确实有效。当我使用 @Input() 将信息从父级传递给子级时，它不起作用。

编辑: 有几个人建议我只绑定(bind)到“记录”，并将 @Input() 传递给子组件，因为它包含可观察的结果，而不仅仅是可观察本身。这是个好主意。我尝试实现这个，但现在遇到了未定义的错误 - 而当我直接从子组件调用服务时却没有。不确定为什么会发生这种情况。

Answer 1

尝试将“records”传递给“accountCall”