Angular2静的JSONオブジェクトの非同期データに関する問題

Question

UIで使用しているいくつかの静的オブジェクトでサービスを設定しています。

fetchRulesVariables（）

fetchRuleVariables() { 

    let variables = [ 

     { 
      name: 'Credit Funding Type', 
      id: 1, 
      multiple: false, 
      hasOperators: true, 
      availableOperators: this.fetchOperators('inResults'), 
      inputType: 'single', 
      placeholder: 'Select a funding type', 
      availableValues: this.fetchFundingInstraments() 
     }, { 
      name: 'Device Trust Score', 
      id: 2, 
      multiple: false, 
      hasOperators: true, 
      availableOperators: this.fetchOperators('gtltResults'), 
      inputType: 'text', 
      placeholder: 'Enter a value between 0 - 100', 
      availableValues: '' 
     } 
    ] 
return variables; 
} 

このオブジェクトは、availableOperatorsとavailableValuesとしてそれへのデータの別の配列を付加する他の機能を実行します。それらも静的なjsonオブジェクトです。

私のコンポーネントでは、lodashを使用してこのデータをIDで取得しています。私のコンポーネントHTMLで

fetchVariableData(id, type) { 

    let data = []; 

    switch (type) { 
     case 'operators': 
      data = _.find(this.variables, {id}).availableOperators; 
      break; 
    } 

    return data; 

} 

、私は結果をフェッチするために私の機能を使用してngForを実行しています。

<li *ngFor="let x of fetchVariableData(1, 'operators')"></li> 

ここでの問題は、私は信じているいくつかの非同期の問題に実行していますということです。これを実行すると、availableOperatorsが定義されていないというエラーが表示されます。しかし、私の演算子を私のfetchVariableData()関数にハードコードすると、うまく動作します。

準備ができていないときにavailableOperatorsを使用しようとしているところで、この非同期の問題を処理するにはどうすればよいですか？

これはすべてスタティックJSONで、HTTPコールはありません。

EDIT1

コンポーネントコード：

export class AddRuleComponent implements OnInit { 
    variables: any; 

    ngOnInit() { 
     this.loadVars(); 
     this.renderAddRuleForm(); 
    } 


    loadVars() { 
     this.outcomes = this._mserv.fetchOutcomeTypes(); 
     this.variables = this._mserv.fetchRuleVariables(); 
    } 

    fetchVariableData(id, type) { 

     let data: any; 

     switch (type) { 
      case 'operators': 
       data = _.find(this.variables, { 
        id 
       }).availableOperators; 
       break; 
     } 
     return data; 
    } 

} 

サービスコード：

fetchRuleVariables() { 

    let variables = [ 

     { 
      name: 'Credit Funding Type', 
      id: 1, 
      multiple: false, 
      hasOperators: true, 
      availableOperators: this.fetchOperators('inResults'), 
      inputType: 'single', 
      placeholder: 'Select a funding type', 
      availableValues: this.fetchFundingInstraments() 
     }, { 
      name: 'Device Trust Score', 
      id: 2, 
      multiple: false, 
      hasOperators: true, 
      availableOperators: this.fetchOperators('gtltResults'), 
      inputType: 'text', 
      placeholder: 'Enter a value between 0 - 100', 
      availableValues: '' 
     } 
    ] 
return variables; 
} 

fetchOperators(type) { 

    let operators = []; 

    // Based on the set of operators we want 
    switch (type) { 

     // In Results 
     case 'inResults': 

      operators.push({ 
       name: 'In List', 
       id: 1, 
      }, { 
       name: 'Not In List', 
       id: 2, 
      }); 

      break; 

      // Greater than & Less than 
     case 'gtltResults': 

      operators.push({ 
       name: 'Greater Than <', 
       id: 3, 
      }, { 
       name: 'Less Than >', 
       id: 4, 
      }); 

      break; 

      // Is/is not 
     case 'isisnot': 

      operators.push({ 
       name: 'Is', 
       id: 5, 
      }, { 
       name: 'Is Not', 
       id: 6, 
      }); 

      break; 
    } 

    return operators; 
} 

HTMLコード：

​​

値ピップe：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'values', pure: false }) 
export class ValuesPipe implements PipeTransform { 
    transform(value: any, args: any[] = null): any { 
    return Object.keys(value).map(key => value[key]); 
    } 
} 

Answer 1

コンポーネントのライフサイクルを確認してください。

としては、コンポーネントのデータを取得し、初期化する）ngOnInitを（呼び出すthe official guideあなたAddRuleComponentにここで説明しました。時間によってngOnInitは（）の値を取り出してプロパティ場合、コンポーネントは既にチェック

ドキュメントに記載されているように、順序はこれにコンストラクタ、ngOnChanges（）、ngOnInit（）であり、突然変異した/初期化されている、だからこそfetchVariableData（）は、あなたが期待するよう_.find(...)が変数オブジェクトを返すされていないため、未定義のエラーとなった（ngOnChanges（）から起こっ）無効のparamsを呼び出すことができます。

variables: any = []; 

をして、コンテナに*ngIf="variables.length"を行う、またはコンストラクタに初期化を移動：

私が最初に初期化するために試してみました。