为什么我在加载组件后获取数据？

Question

我对Angular2（版本5）上的http请求有一些问题。 我有一个服务data-service.service.ts和一个组件 real-time-value.component.ts。

我想从假json中获取数据，添加到数组并显示在 real-time-value.component.ts上。 我的问题是我的组件加载后我会检索system 。 我附上了文件代码和控制台报告的图像。 我需要解决这个问题，因为我有几个组件，我必须使用相同的数据。在 real-time-value.component.ts我必须只显示名称，但有了路由我必须显示我的

的其他详细信息

我有两个问题： 如何在real-time-value.component.ts上正确加载我的数据？

Console如何打印阵列两次？

#### real-time-value.component.ts

import {Injectable, OnInit} from '@angular/core';
import {SystemModel} from './system.model';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
@Injectable()
export class DataServiceService implements OnInit{

  private systemUrl = 'http://my-json-server.typicode.com/nicscap/fake_json/ImpiantiProva';  // URL to web api

  private systems: SystemModel[] = [];

  getSystems_1() {
    this.fetchSystem();
    return this.systems;
  }

  constructor(private http: HttpClient) { }

  ngOnInit() {
    console.log('start ngOnInit');
  }
  fetchSystem() {
    this.http.get<SystemModel[]>(this.systemUrl)
      .subscribe(
        data=> {
          console.log('I\'m Inside  subscribe');
          this.systems = data;
          console.log(data);
        },
        (err: HttpErrorResponse) => {
          if (err.error instanceof Error) {
                       console.log('An error occurred:', err.error.message);
          } else {

            console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
          }
        }
      );
  }      
}

#### real-time-value.component.ts import {Injectable, OnInit} from '@angular/core'; import {SystemModel} from './system.model'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; @Injectable() export class DataServiceService implements OnInit{ private systemUrl = 'http://my-json-server.typicode.com/nicscap/fake_json/ImpiantiProva'; // URL to web api private systems: SystemModel[] = []; getSystems_1() { this.fetchSystem(); return this.systems; } constructor(private http: HttpClient) { } ngOnInit() { console.log('start ngOnInit'); } fetchSystem() { this.http.get<SystemModel[]>(this.systemUrl) .subscribe( data=> { console.log('I\'m Inside subscribe'); this.systems = data; console.log(data); }, (err: HttpErrorResponse) => { if (err.error instanceof Error) { console.log('An error occurred:', err.error.message); } else { console.log(`Backend returned code ${err.status}, body was: ${err.error}`); } } ); } }

   ###data-service.service.ts

    import { Component, OnInit } from '@angular/core';

    import { ActivatedRoute } from '@angular/router';
    import { Location } from '@angular/common';
    import {DataServiceService} from '../shared/data-service.service';


    @Component({
      selector: 'app-real-time-value',
      templateUrl: './real-time-value.component.html',
      styleUrls: ['./real-time-value.component.css']
})


export class RealTimeValueComponent implements OnInit {
  public systems = [];

  constructor(private _dataService: DataServiceService,
              private route: ActivatedRoute,
              ) { }

  ngOnInit() {
    console.log('i\'M ON ngOnInit');
    this.system= this._dataService.getSystems_1();
    console.log('console.log BEFORE data retrive from data-service.service.ts');
    console.log(this.systems);
    console.log('console.log AFTER data retrive from data-service.service.ts');
  }
}

感谢