Question

我正在制作一个图表数字的页面，但是无法让我的ui从我的json更新，所以我简化了问题 - ＆gt;改变我的var＆＃39;标题＆＃39;在异步调用后的UI中。

订阅服务从异步调用返回后，如何更新绑定的HTML元素/ ts var {{title}}元素？

我的代码如下

import { Component, NgZone } from '@angular/core';
import { HttpWebServiceService1 } from './http-web-service-service';
import { Chart } from './bar-chart-demo/chartModel';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [HttpWebServiceService1]
})
export class AppComponent {
    title:string;

  constructor(HttpWebServiceService1: HttpWebServiceService1){
    this.title = 'see this';
    HttpWebServiceService1.getHTTP()
      .subscribe(
        charts => 
        { 
          this.title="now this";      
        },
      );

}
}

我的HTML是

<div class="flex-container-header" 
    fxLayout="row" 
    fxLayoutAlign="space-between center">
  <div class="flex-item" fxFlex=10>
    <img src="../../assets/img/ami_logo1.png" ng-href="www.mysite.ie" >
  </div>
</div> 
'<h1> {{title}} </h1>'
</div>

Answer 1

要手动触发更改检测，您可以使用ChangeDetectorRef提供程序。

constructor(private ref: ChangeDetectorRef){} //<-- inject in constructor
//later use like this:
this.ref.detectChanges();

文档：https://angular.io/docs/ts/latest/api/core/index/ChangeDetectorRef-class.html

将var绑定到html，以便在异步订阅调用之后更改ui

1 个答案: