角度 2 中的插值不起作用

Question

我在 Angular 2 中使用Plot.ly来创建热图图。 每当我通过缩放更改绘图布局中轴的可见范围时，我希望"视图范围"(图中 x 轴的端点)通过插值显示在 DOM 中。 尽管尝试通过ChangeDetectorRef和NgZone强制更改检测，但插值拒绝更新。

<div class="row">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">2D View</span>
<!-- These aren't updating -->
{{sliceIndexStart}} - {{sliceIndexEnd}}
<div #plotly id="plotly" name="plotly" style="width: 100%; height: 600px;">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
</div>
</div>
</div>

我的组件类看起来像这样：

/* Imports and declarations */
...

@Component({
selector: 'app-two-d-view',
templateUrl: './two-d-view.component.html',
styleUrls: [ './two-d-view.component.scss' ],
providers: [ H5servTestService ]
})
export class TwoDViewComponent implements OnInit {
@Input() data: any;
@Input() layout: any;
@Input() options: any;
@Input() displayRawData: boolean;
@ViewChild('plotly') private plotly: ElementRef;
private sliceIndexStart: number;
private sliceIndexEnd: number;
constructor(private dataService: H5servTestService) {
this.sliceIndexStart = 1000;
this.sliceIndexEnd = 2000;
}
ngOnInit() {
this.dataService.getData().subscribe(
res => {
/* Get data and specify layout/options */
...
Plotly.newPlot('plotly', this.data, this.layout, this.options);
this.plotly.nativeElement.on('plotly_relayout', data => {
if (data[ 'xaxis.range[0]' ] && data[ 'xaxis.range[1]' ]) {
/* Why isn't this updating the view??? */
this.sliceIndexStart = <number>data[ 'xaxis.range[0]' ];
this.sliceIndexEnd = <number>data[ 'xaxis.range[1]' ];
}
});
},
err => {
toast(err);
}
);
}
}

我正在处理情节的重新布局事件，如果我toast变量，它们确实在组件中更新。 但是视图模板中的插值没有更新...

问题

为什么更新组件的实例属性不会渗透到我使用插值显示这些值的视图中？

到目前为止我的想法：

我真的挂断了这样一个

• 事实，即我正在更新视图模型的位置是在@ViewChild(this.plotly.nativeElement.on('plotly_relayout', ...))nativeElement进行的订阅的处理程序中。
  • 我还不太了解它，但这是否会让我处于与运行更改检测的默认区域不同的区域？
  • 我真的在对我认为的对象进行更改吗？ 如果没有，如何对正确的对象进行更改，从而触发视图样板中的更改？

即使您必须更正我的措辞，也欢迎任何和所有反馈。

Answer 1

将子组件的组合用于模板的插值部分，并使用注入的 NgZone 对该区域中父组件的属性运行更新。 不确定这与使用子组件以外的先前方法有何不同。 但是哦，好吧。