Wsrtjtyk

I'm having an issue where I am using an async function in Angular 6 data binding:

<span *ngIf="application.status == 'in-progress'; else new">

  {{getAssignedUser(application.user_id)}}

</span>

The getAssignedUser() is an async function which fetches a document from Firestore and I want to display the assigned user's firstname which I received from Firestore. The only problem here is I can't display the firstname value OnInit. If I insert a button and add a click event, it displays the name.

Component:

async getAssignedUser(id): Promise<string> {

    if (id != null) {

        return this._usersService

        .getUserById(id)

        .then(data => {

            this.assignedUser = data.user_fname;

            return this.assignedUser;

        })

    } else {

        return null;

    }

}

Service:

getUserById(id): any {

    let user: any;

    user = this.afs.collection('agents').doc(id).ref.get().then(function (doc) {

        if (doc.exists) {

            user = doc.data();

            console.log(user);

            return user;

        }

        else {

            console.log('No such document');

        }

    }).catch(function (error) {

        console.log('Error getting document: ', error);

    })

    return user;

}

Any help please?

Issue

The issue with making the call getAssignedUser from the html and expecting to return the value. This will not guarantee because getAssignedUser performs async operation. You had mentioned the async operation on getAssignedUser however does not returns any Observable or Promise.

Solution

You need to change in both services and component. Function should return the Promise to handle this case.

Service:

  getUserById(id): any {



    return new Promise((resolve, reject) => {



      this.afs.collection('agents').doc(id).ref.get().then(function (doc) {

        if (doc.exists) {

          user = doc.data();

          console.log(user);

          resolve(user);

        }

        else {

          resolve(null); //<-- you can reject if you want.

        }

      }

    }

  }

Component:

async getAssignedUser(id): Promise<string> {

        return this._usersService

        .getUserById(id);

}

html

<span *ngIf="application.status == 'in-progress'; else new">

  {{getAssignedUser(application.user_id)} | async}

</span>

Important : You should not function in html, it may lead to multiple call and will impact on the performance. Better would be to use function instead.

Note : code is written directly to stackoverflow editor so there could be typo or syntactical error. So please correct yourself.

Agree with @Sunil Singh Above Answer, small correction in template file. async operator is mainly used for observable. You can call without that it should work.

<span *ngIf="application.status == 'in-progress'; else new">

  {{getAssignedUser(application.user_id)}}

</span>