Use Promise function in Angular 6 Data Binding
up vote
1
down vote
favorite
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?
javascript angular typescript google-cloud-firestore angular6
edited Nov 11 at 0:41
HDJEMAI
4,058143653
asked Nov 10 at 23:34
sleepz
132
|
show 2 more comments
up vote
1
down vote
favorite
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?
javascript angular typescript google-cloud-firestore angular6
edited Nov 11 at 0:41
HDJEMAI
4,058143653
asked Nov 10 at 23:34
sleepz
132
2
Can you provide us with a stackblitz fro your example to be more clear ?
– Shorbagy
Nov 10 at 23:48
What is it you're trying to display? You're doing{{getAssignedUser(application.user_id)}}, butgetAssignedUserreturns a Promise. You could use anasyncpipe, like{{getAssignedUser(application.user_id) | async }}
– user184994
Nov 10 at 23:49
@user184994 I'm trying to display a string actually. I don't know how to get the string value from the Promise. It's working with a click event. To be even more precise, I'm actually using an id to retrieve data from another Firestore document and want to access that document values.
– sleepz
Nov 10 at 23:53
You can try using theasyncpipe to get the value out, which would be{{getAssignedUser(application.user_id) | async }}
– user184994
Nov 10 at 23:55
1
That;s one of the downsides of calling functions from within the template: the function is called for every change detection cycle. Instead, why not calledgetUserByIdinngOnInit, and just use{{assignedUser}}in your template?
– user184994
Nov 11 at 0:01
|
show 2 more comments
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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?
javascript angular typescript google-cloud-firestore angular6
edited Nov 11 at 0:41
HDJEMAI
4,058143653
asked Nov 10 at 23:34
sleepz
132
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?
javascript angular typescript google-cloud-firestore angular6
javascript angular typescript google-cloud-firestore angular6
edited Nov 11 at 0:41
HDJEMAI
4,058143653
asked Nov 10 at 23:34
sleepz
132
edited Nov 11 at 0:41
HDJEMAI
4,058143653
asked Nov 10 at 23:34
sleepz
132
edited Nov 11 at 0:41
HDJEMAI
4,058143653
edited Nov 11 at 0:41
HDJEMAI
4,058143653
edited Nov 11 at 0:41
HDJEMAI
4,058143653
4,058143653
asked Nov 10 at 23:34
sleepz
132
asked Nov 10 at 23:34
sleepz
132
asked Nov 10 at 23:34
sleepz
132
132
2
Can you provide us with a stackblitz fro your example to be more clear ?
– Shorbagy
Nov 10 at 23:48
What is it you're trying to display? You're doing{{getAssignedUser(application.user_id)}}, butgetAssignedUserreturns a Promise. You could use anasyncpipe, like{{getAssignedUser(application.user_id) | async }}
– user184994
Nov 10 at 23:49
@user184994 I'm trying to display a string actually. I don't know how to get the string value from the Promise. It's working with a click event. To be even more precise, I'm actually using an id to retrieve data from another Firestore document and want to access that document values.
– sleepz
Nov 10 at 23:53
You can try using theasyncpipe to get the value out, which would be{{getAssignedUser(application.user_id) | async }}
– user184994
Nov 10 at 23:55
1
That;s one of the downsides of calling functions from within the template: the function is called for every change detection cycle. Instead, why not calledgetUserByIdinngOnInit, and just use{{assignedUser}}in your template?
– user184994
Nov 11 at 0:01
|
show 2 more comments
2
Can you provide us with a stackblitz fro your example to be more clear ?
– Shorbagy
Nov 10 at 23:48
What is it you're trying to display? You're doing{{getAssignedUser(application.user_id)}}, butgetAssignedUserreturns a Promise. You could use anasyncpipe, like{{getAssignedUser(application.user_id) | async }}
– user184994
Nov 10 at 23:49
@user184994 I'm trying to display a string actually. I don't know how to get the string value from the Promise. It's working with a click event. To be even more precise, I'm actually using an id to retrieve data from another Firestore document and want to access that document values.
– sleepz
Nov 10 at 23:53
You can try using theasyncpipe to get the value out, which would be{{getAssignedUser(application.user_id) | async }}
– user184994
Nov 10 at 23:55
1
That;s one of the downsides of calling functions from within the template: the function is called for every change detection cycle. Instead, why not calledgetUserByIdinngOnInit, and just use{{assignedUser}}in your template?
– user184994
Nov 11 at 0:01
2
2
Can you provide us with a stackblitz fro your example to be more clear ?
– Shorbagy
Nov 10 at 23:48
Can you provide us with a stackblitz fro your example to be more clear ?
– Shorbagy
Nov 10 at 23:48
What is it you're trying to display? You're doing
{{getAssignedUser(application.user_id)}}, but getAssignedUser returns a Promise. You could use an async pipe, like {{getAssignedUser(application.user_id) | async }}– user184994
Nov 10 at 23:49
What is it you're trying to display? You're doing
{{getAssignedUser(application.user_id)}}, but getAssignedUser returns a Promise. You could use an async pipe, like {{getAssignedUser(application.user_id) | async }}– user184994
Nov 10 at 23:49
@user184994 I'm trying to display a string actually. I don't know how to get the string value from the Promise. It's working with a click event. To be even more precise, I'm actually using an id to retrieve data from another Firestore document and want to access that document values.
– sleepz
Nov 10 at 23:53
@user184994 I'm trying to display a string actually. I don't know how to get the string value from the Promise. It's working with a click event. To be even more precise, I'm actually using an id to retrieve data from another Firestore document and want to access that document values.
– sleepz
Nov 10 at 23:53
You can try using the
async pipe to get the value out, which would be {{getAssignedUser(application.user_id) | async }}– user184994
Nov 10 at 23:55
You can try using the
async pipe to get the value out, which would be {{getAssignedUser(application.user_id) | async }}– user184994
Nov 10 at 23:55
1
1
That;s one of the downsides of calling functions from within the template: the function is called for every change detection cycle. Instead, why not called
getUserById in ngOnInit, and just use {{assignedUser}} in your template?– user184994
Nov 11 at 0:01
That;s one of the downsides of calling functions from within the template: the function is called for every change detection cycle. Instead, why not called
getUserById in ngOnInit, and just use {{assignedUser}} in your template?– user184994
Nov 11 at 0:01
|
show 2 more comments
2 Answers
2
active
oldest
votes
up vote
0
down vote
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.
answered Nov 11 at 3:43
Sunil Singh
5,5551625
async is required only to observable, not for promises.
– Suresh Kumar Ariya
Nov 11 at 6:30
@SureshKumarAriya I tried, and it's not working :/
– sleepz
Nov 11 at 8:17
@sleepz - please create stackblitz demo to get it fix quicker and easier way.
– Sunil Singh
Nov 11 at 8:31
add a comment |
up vote
0
down vote
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>
answered Nov 11 at 6:32
Suresh Kumar Ariya
3,7471215
Not true, the async pipe also works with promises. Please check the description in the docs
– user184994
Nov 11 at 7:34
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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.
answered Nov 11 at 3:43
Sunil Singh
5,5551625
async is required only to observable, not for promises.
– Suresh Kumar Ariya
Nov 11 at 6:30
@SureshKumarAriya I tried, and it's not working :/
– sleepz
Nov 11 at 8:17
@sleepz - please create stackblitz demo to get it fix quicker and easier way.
– Sunil Singh
Nov 11 at 8:31
add a comment |
up vote
0
down vote
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.
answered Nov 11 at 3:43
Sunil Singh
5,5551625
async is required only to observable, not for promises.
– Suresh Kumar Ariya
Nov 11 at 6:30
@SureshKumarAriya I tried, and it's not working :/
– sleepz
Nov 11 at 8:17
@sleepz - please create stackblitz demo to get it fix quicker and easier way.
– Sunil Singh
Nov 11 at 8:31
add a comment |
up vote
0
down vote
up vote
0
down vote
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.
answered Nov 11 at 3:43
Sunil Singh
5,5551625
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.
answered Nov 11 at 3:43
Sunil Singh
5,5551625
answered Nov 11 at 3:43
Sunil Singh
5,5551625
answered Nov 11 at 3:43
Sunil Singh
5,5551625
answered Nov 11 at 3:43
Sunil Singh
5,5551625
5,5551625
async is required only to observable, not for promises.
– Suresh Kumar Ariya
Nov 11 at 6:30
@SureshKumarAriya I tried, and it's not working :/
– sleepz
Nov 11 at 8:17
@sleepz - please create stackblitz demo to get it fix quicker and easier way.
– Sunil Singh
Nov 11 at 8:31
add a comment |
async is required only to observable, not for promises.
– Suresh Kumar Ariya
Nov 11 at 6:30
@SureshKumarAriya I tried, and it's not working :/
– sleepz
Nov 11 at 8:17
@sleepz - please create stackblitz demo to get it fix quicker and easier way.
– Sunil Singh
Nov 11 at 8:31
async is required only to observable, not for promises.
– Suresh Kumar Ariya
Nov 11 at 6:30
async is required only to observable, not for promises.
– Suresh Kumar Ariya
Nov 11 at 6:30
@SureshKumarAriya I tried, and it's not working :/
– sleepz
Nov 11 at 8:17
@SureshKumarAriya I tried, and it's not working :/
– sleepz
Nov 11 at 8:17
@sleepz - please create stackblitz demo to get it fix quicker and easier way.
– Sunil Singh
Nov 11 at 8:31
@sleepz - please create stackblitz demo to get it fix quicker and easier way.
– Sunil Singh
Nov 11 at 8:31
add a comment |
up vote
0
down vote
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>
answered Nov 11 at 6:32
Suresh Kumar Ariya
3,7471215
Not true, the async pipe also works with promises. Please check the description in the docs
– user184994
Nov 11 at 7:34
add a comment |
up vote
0
down vote
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>
answered Nov 11 at 6:32
Suresh Kumar Ariya
3,7471215
Not true, the async pipe also works with promises. Please check the description in the docs
– user184994
Nov 11 at 7:34
add a comment |
up vote
0
down vote
up vote
0
down vote
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>
answered Nov 11 at 6:32
Suresh Kumar Ariya
3,7471215
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>
answered Nov 11 at 6:32
Suresh Kumar Ariya
3,7471215
answered Nov 11 at 6:32
Suresh Kumar Ariya
3,7471215
answered Nov 11 at 6:32
Suresh Kumar Ariya
3,7471215
answered Nov 11 at 6:32
Suresh Kumar Ariya
3,7471215
3,7471215
Not true, the async pipe also works with promises. Please check the description in the docs
– user184994
Nov 11 at 7:34
add a comment |
Not true, the async pipe also works with promises. Please check the description in the docs
– user184994
Nov 11 at 7:34
Not true, the async pipe also works with promises. Please check the description in the docs
– user184994
Nov 11 at 7:34
Not true, the async pipe also works with promises. Please check the description in the docs
– user184994
Nov 11 at 7:34
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244472%2fuse-promise-function-in-angular-6-data-binding%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Can you provide us with a stackblitz fro your example to be more clear ?
– Shorbagy
Nov 10 at 23:48
What is it you're trying to display? You're doing
{{getAssignedUser(application.user_id)}}, butgetAssignedUserreturns a Promise. You could use anasyncpipe, like{{getAssignedUser(application.user_id) | async }}– user184994
Nov 10 at 23:49
@user184994 I'm trying to display a string actually. I don't know how to get the string value from the Promise. It's working with a click event. To be even more precise, I'm actually using an id to retrieve data from another Firestore document and want to access that document values.
– sleepz
Nov 10 at 23:53
You can try using the
asyncpipe to get the value out, which would be{{getAssignedUser(application.user_id) | async }}– user184994
Nov 10 at 23:55
1
That;s one of the downsides of calling functions from within the template: the function is called for every change detection cycle. Instead, why not called
getUserByIdinngOnInit, and just use{{assignedUser}}in your template?– user184994
Nov 11 at 0:01