TypeScript Get current user

Question

I have some issue with returning current logged in user from SharePoint from servise to the compoment, issue is with component , but in service is ok , as you can see on the screenshot from google chrome console.

Any suggestion how to fix this issue, or different solution ?

Screenshot - console.log from service

optimizationPropozal.service.ts

/**
 * Get current logged in user name
 */
public getCurrentUser()
{

    let self = this;

    var promise = new Promise(function (resolve, reject)
    {
        try
        {
            var context = new SP.ClientContext.get_current();
            var web = context.get_web();
            var user = web.get_currentUser();
            context.load(user);
            context.executeQueryAsync(function ()
            {
                this.createdBy = user.get_title();

                console.log(this.createdBy);

            }, function ()
            {
                alert('Unable to get current user data!');
            });
        } catch (e)
        {
            debugger;
        }
    });

    return promise;
}

optimizationProposal.component.ts

    //Display current user as creator of request (createdBy)
    this.optimizationService.getCurrentUser().then((promise) =>
    {
        console.log('Promise', promise);
    });

.html

<div class="form-group">
                    <label for="ersteller">Ersteller:</label>
                    <span class="ersteller">{{createdBy}}</span>
                </div>

Answer 1

You will need to actually resolve the Promise with the value when it is retrieved.

The callbacks in executeQueryAsync should rather look like this:

context.executeQueryAsync(function () {
    this.createdBy = user.get_title();
    // This means that when the Promise is resolved, it returns the user name
    resolve(this.createdBy);
}, function () {
    reject('Unable to get current user data!');
});

In your component, you can then do the following:

this.optimizationService.getCurrentUser().then(function (userName) {
    // userName will be the actual value, equal to user.get_title() above
    console.log('Promise', userName);
}); // And you could also .catch here to show the alert with the error message

Answer 2

Thank you Anon, works good but now I have issue to display userName in the html

component

  //Display current user as creator of request (createdBy)
    this.optimizationService.getCurrentUser().then(function (userName)
    {
        this.createdBy = userName;

    });

html

<div class="form-group">
     <label for="ersteller">Ersteller:</label>
     <span class="ersteller">{{createdBy}}</span>
</div>