角度第三方库交互

ng-bootstrap ( ng-bootstrap )和 Highcharts Highcharts ).

metering 包含两个子组件的组件: data-selection 和 metering-chart ,因此:

<div>
    <data-selection (selectedEntities)="onSelectedData()"></data-selection>
    <button (click)="loadMeteringData()">Load Data</button>
    <metering-chart *ngIf="chartData" [chartData]="chartData"></metering-chart>
</div>

哪里 数据选择 包含以下内容- -模板:

[...]
<form class="form-inline">
    <div class="form-group">
        [...]
        <div class="input-group">
            <input class="form-control" 
                   placeholder="yyyy-mm-dd" 
                   name="dpStart" 
                   [(ngModel)]="startDateModel" 
                   ngbDatepicker 
                   #startDate="ngbDatepicker">
            <div class="input-group-addon" 
                 (click)="startDate.toggle()">
                <i class="fa fa-calendar"></i>
            </div>
            [...]
        </div>
    </div>
</form>
[...]

和

<chart [options]="options" 
    (load)="createChartObject($event.context)"
    (drilldown)="drilledDown($event)"
    (drillup)="drilledUp($event)" style="width:100%; display: inline-block; "></chart>

这个 测量 router-outlet 在a中声明 Routes RoutingModule 路由模块 SharedModule (其中两个子组件: 数据选择 和 申报并出口),以及 AppModule .

测量 的 chartData 未定义,则 计量表 组件不显示。在这段时间里,挑选约会的人工作得很有魅力。

我曾尝试创建一个plunker,在那里复制了该问题,但没有任何效果……然而,这里有一个gif显示了发生的事情:

我正在使用以下内容:

Angular v. 4.0.1 angular2-highcharts v. 0.5.5 ng-bootstrap v. 1.0.0-alpha.27