Question

我有一个服务，可以从我的API成功返回一个对象。到返回时，我已经使用默认值渲染了我的自定义图形组件。

我可以提取＆＃39; title＆＃39;例如，从对象，请参阅\\'works!'评论

如何更新我的图表组件＆＃39; chart1Title＆＃39;？

import { Component } 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 {
    charts: Chart[];
    thisChartObject: Array<Object>;
    thisChartsTitle: string;


  constructor(HttpWebServiceService1: HttpWebServiceService1){
    HttpWebServiceService1.getHTTP()
      .subscribe(
        charts => 
        {
          console.log(charts); //works
          console.log(charts['charts'][0]['title']); //works
this.chart1Title = charts['charts'][0]['title']; //does not work
        },
        error => console.error('Error: ' + error),
        () => console.log(charts[0])
      );

  }

  //Draw chart with some default values
  chart1Data:any[] = [
    {data: [3, 1, 1], type: 'bar'}
  ];
  chart1Label:string[] = [Label1', 'Label2', 'Label3'];
  chart1Type='bar';
  chart1Title = 'my graph title';
}

我的HTML

<!-- Header -->
<div class="flex-container-header" 
    fxLayout="row" 
    fxLayoutAlign="space-between center">
  <div class="flex-item"> 
    <img src="../../assets/img/my_logo.png" >
  </div>
  <div class="flex-item" fxFlex=10>
    <img src="../../assets/img/my_logo1.png" ng-href="www.site.ie" >
  </div>
</div> 

<!--Headline Chart-->
<div *ngIf="!isLoading">
  <div class="flex-container" 
     fxLayout="row" 
     fxLayout.md="column"
     fxLayout.sm="column"
     fxLayout.xs="column"
     fxLayoutAlign="center">
  <div class="flex-item" fxFlex=60 fxFlex.md=100 fxFlex.sm=100 fxFlex.xs=100> <app-bar-chart-demo [chartLabel]="chart1Label" [chartData]="chart1Data" [chartType]="chart1Type" [(chartTitle)]="chart1Title"></app-bar-chart-demo>  </div>
</div>
</div>    
<p></p>
</div>

Answer 1

我的工作中遇到同样的问题，对我来说，我使用了一个标志：override func viewDidLoad() { super.viewDidLoad() if let view = self.view as! SKView? { // Load the SKScene from 'MainScene.sks' if let mainScene = MainScene(fileNamed: "MainScene") { // Set the scale mode to scale to fit the window mainScene.scaleMode = .aspectFill // Present the scene view.presentScene(mainScene) } view.showsFPS = true view.showsDrawCount = true view.showsNodeCount = true view.showsPhysics = true view.showsDrawCount = true } }

isLoading

在export class AppComponent { charts: Chart[]; thisChartObject: Array<Object>; thisChartsTitle: string; isLoading: boolean; constructor(HttpWebServiceService1: HttpWebServiceService1){ this.isLoading = true; HttpWebServiceService1.getHTTP() .subscribe( charts => { console.log(charts); //works console.log(charts['charts'][0]['title']); //works this.updateData(charts); }, error => console.error('Error: ' + error) ); } public updateData(charts: any) { this.chart1Title = charts['charts'][0]['title']; this.isLoading = false; } }：

中

*.component.html

希望它有所帮助。

使用JSON返回服务后，在UI中更新我的图形

1 个答案: