Angular2和AWS Lambda：如何在呈现组件之前加载数据

Question

我正在使用Lambda函数从数据库中获取数据，并希望等到数据到达后再呈现页面。

我知道可以将promises和* ngIf结合使用来完成此操作（ 如此处所述 ），但是我不确定如何在我的代码中实现它。

这是我的代码：

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);
  }


}

还有我的Lambda函数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() - lambdaGetBp()周围或者在其中的代码周围放一个Promise。

现在看起来像这样：

  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);