Angular async pipe hangs on a promise
this is a snippet of my template:
<div class="explanation">
{{ foo() | async }}
</div>
this is the function:
foo(): Promise<string> {
return Promise.resolve('hello');
}
This just hangs the browser. How come? what am i missing?
javascript angular asynchronous promise
asked Nov 20 '18 at 18:11
AK_AK_
5,31743172
add a comment |
this is a snippet of my template:
<div class="explanation">
{{ foo() | async }}
</div>
this is the function:
foo(): Promise<string> {
return Promise.resolve('hello');
}
This just hangs the browser. How come? what am i missing?
javascript angular asynchronous promise
asked Nov 20 '18 at 18:11
AK_AK_
5,31743172
1
Did the same for me.
– SiddAjmera
Nov 20 '18 at 18:23
I think this scenario runs into side effects mentioned in doc. angular.io/guide/template-syntax#avoid-side-effects If I change it to property, everything works fine: stackblitz.com/edit/…
– wannadream
Nov 20 '18 at 18:42
add a comment |
this is a snippet of my template:
<div class="explanation">
{{ foo() | async }}
</div>
this is the function:
foo(): Promise<string> {
return Promise.resolve('hello');
}
This just hangs the browser. How come? what am i missing?
javascript angular asynchronous promise
asked Nov 20 '18 at 18:11
AK_AK_
5,31743172
this is a snippet of my template:
<div class="explanation">
{{ foo() | async }}
</div>
this is the function:
foo(): Promise<string> {
return Promise.resolve('hello');
}
This just hangs the browser. How come? what am i missing?
javascript angular asynchronous promise
javascript angular asynchronous promise
asked Nov 20 '18 at 18:11
AK_AK_
5,31743172
asked Nov 20 '18 at 18:11
AK_AK_
5,31743172
asked Nov 20 '18 at 18:11
AK_AK_
5,31743172
asked Nov 20 '18 at 18:11
AK_AK_
5,31743172
asked Nov 20 '18 at 18:11
AK_AK_
5,31743172
5,31743172
1
Did the same for me.
– SiddAjmera
Nov 20 '18 at 18:23
I think this scenario runs into side effects mentioned in doc. angular.io/guide/template-syntax#avoid-side-effects If I change it to property, everything works fine: stackblitz.com/edit/…
– wannadream
Nov 20 '18 at 18:42
add a comment |
1
Did the same for me.
– SiddAjmera
Nov 20 '18 at 18:23
I think this scenario runs into side effects mentioned in doc. angular.io/guide/template-syntax#avoid-side-effects If I change it to property, everything works fine: stackblitz.com/edit/…
– wannadream
Nov 20 '18 at 18:42
1
1
Did the same for me.
– SiddAjmera
Nov 20 '18 at 18:23
Did the same for me.
– SiddAjmera
Nov 20 '18 at 18:23
I think this scenario runs into side effects mentioned in doc. angular.io/guide/template-syntax#avoid-side-effects If I change it to property, everything works fine: stackblitz.com/edit/…
– wannadream
Nov 20 '18 at 18:42
I think this scenario runs into side effects mentioned in doc. angular.io/guide/template-syntax#avoid-side-effects If I change it to property, everything works fine: stackblitz.com/edit/…
– wannadream
Nov 20 '18 at 18:42
add a comment |
1 Answer
1
active
oldest
votes
From MDN on Promise.resolve
Warning: Do not call Promise.resolve on a thenable that resolves to itself. This will cause infinite recursion as it tries to flatten what seems to be an infinitely nested promise.
AND
From Angular's Avoid side effects guideline:
evaluation of a template expression should have no visible side effects. The expression language itself does its part to keep you safe. You can't assign a value to anything in a property binding expression nor use the increment and decrement operators.
Your implementation seems to do just that.
Fix:
As suggested by wannadream, assign the promise to a property and then use that property in the template along with the async pipe:
import { Component } from '@angular/core';
@Component({...})
export class AppComponent {
foo: Promise<string>;
ngOnInit() {
this.foo = Promise.resolve('hello');
}
}
And in the template:
<div class="explanation">
{{ foo | async }}
</div>
answered Nov 20 '18 at 18:47
SiddAjmeraSiddAjmera
13.3k31137
I dont understand how what i did is different from the example at: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– AK_
Nov 20 '18 at 18:51
Well, what you did was called a function in the template that returns a Promise. The first eg on MDN assigns the return value fromPromise.resolveto a variable and then usesthenon it. It's different from wannadream's suggestion.
– SiddAjmera
Nov 20 '18 at 18:58
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53399043%2fangular-async-pipe-hangs-on-a-promise%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
From MDN on Promise.resolve
Warning: Do not call Promise.resolve on a thenable that resolves to itself. This will cause infinite recursion as it tries to flatten what seems to be an infinitely nested promise.
AND
From Angular's Avoid side effects guideline:
evaluation of a template expression should have no visible side effects. The expression language itself does its part to keep you safe. You can't assign a value to anything in a property binding expression nor use the increment and decrement operators.
Your implementation seems to do just that.
Fix:
As suggested by wannadream, assign the promise to a property and then use that property in the template along with the async pipe:
import { Component } from '@angular/core';
@Component({...})
export class AppComponent {
foo: Promise<string>;
ngOnInit() {
this.foo = Promise.resolve('hello');
}
}
And in the template:
<div class="explanation">
{{ foo | async }}
</div>
answered Nov 20 '18 at 18:47
SiddAjmeraSiddAjmera
13.3k31137
I dont understand how what i did is different from the example at: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– AK_
Nov 20 '18 at 18:51
Well, what you did was called a function in the template that returns a Promise. The first eg on MDN assigns the return value fromPromise.resolveto a variable and then usesthenon it. It's different from wannadream's suggestion.
– SiddAjmera
Nov 20 '18 at 18:58
add a comment |
From MDN on Promise.resolve
Warning: Do not call Promise.resolve on a thenable that resolves to itself. This will cause infinite recursion as it tries to flatten what seems to be an infinitely nested promise.
AND
From Angular's Avoid side effects guideline:
evaluation of a template expression should have no visible side effects. The expression language itself does its part to keep you safe. You can't assign a value to anything in a property binding expression nor use the increment and decrement operators.
Your implementation seems to do just that.
Fix:
As suggested by wannadream, assign the promise to a property and then use that property in the template along with the async pipe:
import { Component } from '@angular/core';
@Component({...})
export class AppComponent {
foo: Promise<string>;
ngOnInit() {
this.foo = Promise.resolve('hello');
}
}
And in the template:
<div class="explanation">
{{ foo | async }}
</div>
answered Nov 20 '18 at 18:47
SiddAjmeraSiddAjmera
13.3k31137
I dont understand how what i did is different from the example at: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– AK_
Nov 20 '18 at 18:51
Well, what you did was called a function in the template that returns a Promise. The first eg on MDN assigns the return value fromPromise.resolveto a variable and then usesthenon it. It's different from wannadream's suggestion.
– SiddAjmera
Nov 20 '18 at 18:58
add a comment |
From MDN on Promise.resolve
Warning: Do not call Promise.resolve on a thenable that resolves to itself. This will cause infinite recursion as it tries to flatten what seems to be an infinitely nested promise.
AND
From Angular's Avoid side effects guideline:
evaluation of a template expression should have no visible side effects. The expression language itself does its part to keep you safe. You can't assign a value to anything in a property binding expression nor use the increment and decrement operators.
Your implementation seems to do just that.
Fix:
As suggested by wannadream, assign the promise to a property and then use that property in the template along with the async pipe:
import { Component } from '@angular/core';
@Component({...})
export class AppComponent {
foo: Promise<string>;
ngOnInit() {
this.foo = Promise.resolve('hello');
}
}
And in the template:
<div class="explanation">
{{ foo | async }}
</div>
answered Nov 20 '18 at 18:47
SiddAjmeraSiddAjmera
13.3k31137
From MDN on Promise.resolve
Warning: Do not call Promise.resolve on a thenable that resolves to itself. This will cause infinite recursion as it tries to flatten what seems to be an infinitely nested promise.
AND
From Angular's Avoid side effects guideline:
evaluation of a template expression should have no visible side effects. The expression language itself does its part to keep you safe. You can't assign a value to anything in a property binding expression nor use the increment and decrement operators.
Your implementation seems to do just that.
Fix:
As suggested by wannadream, assign the promise to a property and then use that property in the template along with the async pipe:
import { Component } from '@angular/core';
@Component({...})
export class AppComponent {
foo: Promise<string>;
ngOnInit() {
this.foo = Promise.resolve('hello');
}
}
And in the template:
<div class="explanation">
{{ foo | async }}
</div>
answered Nov 20 '18 at 18:47
SiddAjmeraSiddAjmera
13.3k31137
edited Nov 20 '18 at 19:02
answered Nov 20 '18 at 18:47
SiddAjmeraSiddAjmera
13.3k31137
answered Nov 20 '18 at 18:47
SiddAjmeraSiddAjmera
13.3k31137
answered Nov 20 '18 at 18:47
SiddAjmeraSiddAjmera
13.3k31137
13.3k31137
I dont understand how what i did is different from the example at: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– AK_
Nov 20 '18 at 18:51
Well, what you did was called a function in the template that returns a Promise. The first eg on MDN assigns the return value fromPromise.resolveto a variable and then usesthenon it. It's different from wannadream's suggestion.
– SiddAjmera
Nov 20 '18 at 18:58
add a comment |
I dont understand how what i did is different from the example at: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– AK_
Nov 20 '18 at 18:51
Well, what you did was called a function in the template that returns a Promise. The first eg on MDN assigns the return value fromPromise.resolveto a variable and then usesthenon it. It's different from wannadream's suggestion.
– SiddAjmera
Nov 20 '18 at 18:58
I dont understand how what i did is different from the example at: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– AK_
Nov 20 '18 at 18:51
I dont understand how what i did is different from the example at: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
– AK_
Nov 20 '18 at 18:51
Well, what you did was called a function in the template that returns a Promise. The first eg on MDN assigns the return value from
Promise.resolve to a variable and then uses then on it. It's different from wannadream's suggestion.– SiddAjmera
Nov 20 '18 at 18:58
Well, what you did was called a function in the template that returns a Promise. The first eg on MDN assigns the return value from
Promise.resolve to a variable and then uses then on it. It's different from wannadream's suggestion.– SiddAjmera
Nov 20 '18 at 18:58
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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%2f53399043%2fangular-async-pipe-hangs-on-a-promise%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
1
Did the same for me.
– SiddAjmera
Nov 20 '18 at 18:23
I think this scenario runs into side effects mentioned in doc. angular.io/guide/template-syntax#avoid-side-effects If I change it to property, everything works fine: stackblitz.com/edit/…
– wannadream
Nov 20 '18 at 18:42