グローバル変数は、角度2のあるコンポーネントから別のコンポーネントに更新された値を保持しません

Question

オブジェクトの2つの配列を持つクラスを宣言しました。配列は、バックエンドからの情報で埋められます。 ObservableとHttpを使ってバックエンドから情報を取得しています。グローバルクラスは、module.tsファイルのプロバイダ配列内で宣言されているため、最も高い点で宣言されています。一番上のコンポーネントの1つでは、ngOnInitメソッドの配列を満たすサービスを購読しています。コンポーネントのコンストラクタに挿入されたデータ配列サービスクラス。私は、このクラスの正しい情報が配列に取り込まれていることがわかります。しかし、子コンポーネントに同じサービスクラスを注入すると、すべての配列がnullになります。どうして？更新された値を保持する方法はありますか？助けてください。ここで

私のコードは次のとおりです。

グローバルクラスAdminProductDisplayInfo（このクラスはapp.module.tsファイルにプロバイダ配列に追加され

//管理 - 製品 - ディスプレイ - info.ts

import { ComponentGroupDisplayInfo } from './component-group-display'; 
import { ServiceCatDisplayInfo } from './service-cat-display-info'; 

export class AdminProudctDisplayInfo { 
     public cgc_info_list: ComponentGroupDisplayInfo[] = []; 
     public service_cat_info_list: ServiceCatDisplayInfo[] = [] 
} 

//サービスは、バックエンドからデータを取得する

import { AdminProudctDisplayInfo } from '../models/admin-product-display-info'; 

@Injectable() 
export class BagProductService { 

private backendURL = 'http://localhost:8080/BAG'; 

    constructor (private http: Http) {} 

    /* This method gets the data necessary to display from backend */ 
    getAdminProductDisplayInfo(): Observable<AdminProudctDisplayInfo> { 

     let adminURL = this.backendURL.concat('/admin/getAdminProudctDisplayInfo'); 
     let body = JSON.stringify(""); 
     let headers = new Headers({'Content-type': 'application/json'}); 
     let options = new RequestOptions({headers: headers}); 

     return this.http.post(adminURL, body, options) 
         .map(this.extractData) 
         .catch(this.handleError); 
    } 

} 

BagProductServiceとAdminProductDisplayInfoがサブスクライブし、データにデータを表示するために使用される上記部品の

import { BagProductService } from '../services/adminBagProduct.service'; 
import { ServiceCatDisplayInfo } from '../models/service-cat-display-info'; 

@Component({ 
    selector: 'admin-add-bag-Product', 
    templateUrl: './admin-add-bag-product.html' 
}) 
export class AdminAddBagProduct implements OnInit { 

    constructor(private router: Router, 
       private bagProdService: BagProductService, 
       private adminProdDispInfo: AdminProudctDisplayInfo) {} 

    ngOnInit() { 
      this.bagProdService.getAdminProductDisplayInfo().subscribe(
       data => {this.adminProdDispInfo = data; console.log("data received: ", data)}, 
       error => {this.errorMessage = <any>error, console.log("Error Message: ", this.errorMessage)}); 
    } 

//Here I see data being populated from backend and everything looks good. 

} 

//子コンポーネントを取得するために使用されますが、すべてがNULLであるから//コンポーネントここに。

import { BagProductService } from '../services/adminBagProduct.service'; 

@Component({ 
    selector: 'admin-add-bag-component', 
    templateUrl: './admin-add-bag-component.html' 
}) 
export class AdminAddBagComponent { 

    constructor(private router: Router, private bagProdService: BagProductService, private adminProdDispInfo: AdminProudctDisplayInfo) { 

     console.log("in Component display: ", this.adminProdDispInfo.cgc_info_list); 

    // Here this.adminProdDispInfo.cgc_info_list and other array is null. 
    } 

} 

Answer 1

あなたはこれを少し後にしています。 AdminProudctDisplayInfoにはどのデータも格納されていません。受け取ったデータのモデルとして宣言しました（interfaceに似ています）。 classに実際にデータを格納するには、コンストラクタと関数を用意する必要があります。しかし、私は強くあなたはそのオプションをスキップし、代わりに角度の方法を行うことをお勧めします。

実際にコンポーネント間でデータを共有する場合は、@Inputの場合、の親にはテンプレート内の子タグがあります。その後、あなたは、親でHTTPリクエストに加入し、ここで、変数などdataと呼ばれるオブジェクトの配列にデータを割り当て、そのように子供にそれを渡します。

<admin-add-bag-component [data]="data"></admin-add-bag-component> 

をし、子供にあなたが持っている、@Inputを使用します

TSで：あなたは、テンプレートで使用できるdata内のデータ、

@Input() data: Object[]; 

ビュー：

<div *ngFor="let d of data">{{d.name}}</div> 

上記のオプションの詳細は、Pass data from parent to child with input bindingです。

子供がrouter-outletで表示されている場合は、Observables（通常）を使用してshared service would be the way to goを使用してください。あなたのケースでは、親はデータを放出し、子供はデータを購読します。あなたの場合に応じて、あるタイプのSubjectを使いたいと思うでしょう。このことができます、とInput近くで見ると共有サービスを取る、非常に良い例がある

希望は、私がここで説明しているよりもはるかに近い説明;）