Angular2とAWS Lambda：コンポーネントをレンダリングする前にデータを読み込む方法

Question

ラムダ関数を使用してデータベースからデータを取得しています。ページがレンダリングされるまでにデータが到着するまで待ちます。

私は約束と* ngIf（as it is explained here）を完成させるための組み合わせがあることを知っていますが、これを私のコードでどのように実装するかはわかりません。

これは私のコードです：

overview.component.ts

export class OverviewComponent implements OnInit { 
    businessPartner: any; 
    bpNumber: number; 
    paymentDetail: PaymentDetails; 
    response: any; 

    constructor() { } 

    ngOnInit() { 
     AWS.config.update({ 
      //Testuser 
      accessKeyId: "XXXXXXXXXXXXX", 
      secretAccessKey: "XXXXXXXXXXXXXXXXXX", 
      region: "eu-west-1", 
     }); 

     //get bpNumber from session storage 
     this.bpNumber = +JSON.parse(sessionStorage.getItem('bpNumber')); 

     this.lambdaGetBp(this.bpNumber); 

     }; 


    lambdaGetBp(bpNumber: number): any{ 
     var lambda = new AWS.Lambda(); 
     var params = { 
     FunctionName: 'readFromDynamoDb', /* required */ 
      Payload: JSON.stringify({ 
       bpNumber : bpNumber, 
      }) 
     }; 
     lambda.invoke(params, function(err, data) { 
      if (err) console.log(err, err.stack); // an error occurred 
      else { 
       var jsonObj = JSON.parse(data.Payload) 
       console.log(jsonObj)   // successful response 
       return jsonObj; 
      }  
     }); 
    } 

    click(){ 
     console.log(this.businessPartner); 
    } 


} 

そして、私のラムダ関数index.js

'use strict'; 

var AWS = require('aws-sdk'); 

var docClient = new AWS.DynamoDB.DocumentClient({ region: 'eu-west-1' }); 


exports.handler = function(e, ctx, callback) { 
    let table = "dsbTable"; 
    let bpNumber = e.bpNumber; 
    let params = {  
     TableName: table, 
     Key: { 
      "bpNumber": bpNumber 
     }, 
    }; 
    docClient.get(params, function(err, data) { 
     if (err) { 
      console.error("Unable to read item. Error JSON:", JSON.stringify(err, null, 2)); 
      callback(err, null); 
     } else { 
      var xml2js = require('xml2js'); // XML2JS Module 
      var parser = new xml2js.Parser(); // Creating XML to JSON parser object 

      parser.parseString(data.Item.getBp, function(err, result) { // creating javascript objects from every XML-entry <=== THIS IS NOT PRETTY :(
       if (err) { 
        console.log('Error!!!!!!') 
       } else { 
        data = result; 
        console.log('Done'); 
       } 

      }); 
     }; 
     callback(null, data); 

    }); 

}; 

はあなたの助けをありがとう:)

Answer 1

さて、私は最終的にそれを考え出し実際には超簡単でした。 私はプロンプトをlambdaGetBp() -Methodのまわりに置くか、あるいはその内部のコードの周りに置かなければなりませんでした。

それは次のようになります。その後、

lambdaGetBp(bpNumber: number){ 
     return new Promise((resolve, reject) => {   //HERE 
     var lambda = new AWS.Lambda(); 
      var params = { 
       FunctionName: 'readFromDynamoDb', /* required */ 
       Payload: JSON.stringify({ 
        bpNumber : bpNumber 
       }) 
      }; 
     lambda.invoke(params, function(err, data) { 
       if (err) console.log(err, err.stack); // an error occurred 
       else { 
        var jsonObj = JSON.parse(data.Payload); 
        console.log(jsonObj);   // successful response 
        resolve(jsonObj);     // AND HERE 
       }  
      }); 
     }); 
    } 

とngOnInit()

this.lambdaGetBp(this.bpNumber).then(data => this.bp= data);

に通常の約束のようにそれを呼び出します