Angular2海图，在Angular4项目中可观测

我正在尝试创建一个图表，使用http请求提交的可观测数据，以下代码正在使用一些虚假数据，我只想用后端脚本提交的真实数据替换它们以下是我的代码：

我的app.ts：

export class MyVerticalchartComponent  {


   @Input() showMePartially: boolean;

  options: Object;

  constructor(public userService3: UserService3) {

       this.options = {
        title : { text : '' },
        chart: {  type: 'area' },
        legend: { enabled: false },
        credits: { enabled: false },
        xAxis: { type: 'datetime',
              //    startOnTick: true,
              //    endOnTick: true,
              //    tickInterval: 24 * 3600 * 1000,
            },
                  dateTimeLabelFormats: {
            second: '%H:%M:%S',
            minute: '%H:%M:%S',
            hour: '%H:%M:%S',
            day: '%H:%M:%S',
            week: '%H:%M:%S',
            month: '%H:%M:%S',
            year: '%H:%M:%S'
        },
        yAxis: { min: 0,
          max: 100 },
        plotOptions: {
          series: {
          //  pointStart: 0,
              color: '#648e59',
              fillOpacity: 0.8,
              fillColor: '#648e59'
                  }
        },
       series: [{
          name: 'Someone1',
          data: [],  // res.json
        }]
    };
  }

      public ngOnInit () {
      this.userService3.getData().subscribe((data) => {
       this.options.series[0].data.operating_details = data;
       console.log(data);
  });

} }

my app.html：

 <chart [options]="options">
      <series>
     </series>
  </chart>

@可注射（） 导出类UserService3{

用户3：可观察

constructor (public http: Http) {

        getData() {

 const tick3$ = Observable.timer(100, 60000);

     return tick3$.flatMap(() => this.http.get(usersURL)).map(res => 
     res.json()).publishBehavior(<User3[]>[]).refCount();



 }
    }

---

通常，您会在服务文件中定义一个设置http请求的方法

getData(){
    return this.http.get(usersUrl)
        .map(res => res.json());
}

然后在您的组件app.ts中，您将订阅可观察的

ngOnInit(){
    this.userService3.getData().subscribe(
        res => {
            this.options.series[0].data = res; // set series data to options object
        },
        err => {
            // error callback
        }
}

---

它不工作，很抱歉，我之前没有时间测试它，但它对我来说很好，所以在服务中它工作得很好，但在我的组件中，当我尝试您的代码时，我编写了一个错误：[ts]类型“void”上不存在属性“subscribe”。any@EmileCantero听起来您从组件调用的方法没有返回可观察的。很抱歉，我意识到我在回答中忘记了return语句。我将更新itI，但我仍有库存：查找我的组件：系列：[{name:'Someone1'，data:[]，//res.json}]}；}public ngOnInit（）{this.userService3.getData（）.subscribe（（data）=>{this.options.series[0].data.operating_details=data；}）；}和我的服务：getData（）{const tick3$=Observable.timer（10060000）；返回tick3$.flatMap（（）=>this.http.get（usersURL））.map（res=>res.json（））.publishBehavior（[]）.refCount（）；}..我更新了我的帖子too@EmileCantero是否需要此.options.series[0].data.operating\u详细信息中的操作\u详细信息？this.options.series[0]。数据应该是您的数据数组，对吗？正是我的朋友。。在我的console.log（）中，我得到了我的对象，但我无法在图表中呈现它。看起来像是路径问题。。

getData(){
    return this.http.get(usersUrl)
        .map(res => res.json());
}

ngOnInit(){
    this.userService3.getData().subscribe(
        res => {
            this.options.series[0].data = res; // set series data to options object
        },
        err => {
            // error callback
        }
}