Question

我在Angular 2中使用Plot.ly来创建热图图。我想要＆＃34;查看范围＆＃34; （图中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>

我的Component类看起来像这样：

/* 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变量输出，它们确实在组件中更新。但是视图模板中的插值不会更新......

问题

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

到目前为止我的想法：

我真的很想知道我更新视图模型的地方是我在nativeElement @ViewChild订阅的订阅者1}}（this.plotly.nativeElement.on('plotly_relayout', ...)）。
- 我还不太了解它，但这是否会让我处于与我的更改检测正在运行的默认区域不同的区域？
- 我实际上是在改变我认为的对象吗？如果没有，我如何对正确的对象进行更改才会触发视图模板的更改？

即使你必须纠正我的措辞，也欢迎任何反馈。

Answer 1

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

Angular 2中的插值不起作用

问题

到目前为止我的想法：

1 个答案: