Ionic ionChange giving ExpressionChangedAfterItHasBeenCheckedError
I've tried to implement all the recommended methods as suggested
Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error
ExpressionChangedAfterItHasBeenCheckedError Explained
However, either it's in combination with Ionic or my own developer skills that are letting me down, I am unable to get this to work without hitting the ExpressionChangedAfterItHasBeenCheckedError error.
I have a list of items that I would like to be able to select independently or allow the user to Select All.
In the .ts file I have two methods:
toggleSelectedUser(user) {
const index = this.selectedUsers.indexOf(user);
if (index >= 0) {
this.selectedUsers.splice(index, 1);
} else {
this.selectedUsers.push(user);
}
}
toggleSelectAll() {
if (!this.selectedUsers.length) {
this.selectedUsers = [...this.template.userData];
} else {
this.selectedUsers = ;
}
}
And in my template I am using
<ion-toggle item-end color="secondary" checked="false" id="checkbox{{idx}}" [checked]="isSelected(user)" (ionChange)="toggleSelectedUser(user)"></ion-toggle>
Is selected simply does this:
isSelected(user) {
return this.selectedUsers.indexOf(user) >= 0;
}
Single toggles are working fine, however when I try to perform toggleSelectAll() I get the dreaded ExpressionChangedAfterItHasBeenCheckedError.
angular ionic-framework asked Nov 25 '18 at 12:32
TaylorsukTaylorsuk
772732
add a comment |
I've tried to implement all the recommended methods as suggested
Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error
ExpressionChangedAfterItHasBeenCheckedError Explained
However, either it's in combination with Ionic or my own developer skills that are letting me down, I am unable to get this to work without hitting the ExpressionChangedAfterItHasBeenCheckedError error.
I have a list of items that I would like to be able to select independently or allow the user to Select All.
In the .ts file I have two methods:
toggleSelectedUser(user) {
const index = this.selectedUsers.indexOf(user);
if (index >= 0) {
this.selectedUsers.splice(index, 1);
} else {
this.selectedUsers.push(user);
}
}
toggleSelectAll() {
if (!this.selectedUsers.length) {
this.selectedUsers = [...this.template.userData];
} else {
this.selectedUsers = ;
}
}
And in my template I am using
<ion-toggle item-end color="secondary" checked="false" id="checkbox{{idx}}" [checked]="isSelected(user)" (ionChange)="toggleSelectedUser(user)"></ion-toggle>
Is selected simply does this:
isSelected(user) {
return this.selectedUsers.indexOf(user) >= 0;
}
Single toggles are working fine, however when I try to perform toggleSelectAll() I get the dreaded ExpressionChangedAfterItHasBeenCheckedError.
angular ionic-framework asked Nov 25 '18 at 12:32
TaylorsukTaylorsuk
772732
add a comment |
I've tried to implement all the recommended methods as suggested
Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error
ExpressionChangedAfterItHasBeenCheckedError Explained
However, either it's in combination with Ionic or my own developer skills that are letting me down, I am unable to get this to work without hitting the ExpressionChangedAfterItHasBeenCheckedError error.
I have a list of items that I would like to be able to select independently or allow the user to Select All.
In the .ts file I have two methods:
toggleSelectedUser(user) {
const index = this.selectedUsers.indexOf(user);
if (index >= 0) {
this.selectedUsers.splice(index, 1);
} else {
this.selectedUsers.push(user);
}
}
toggleSelectAll() {
if (!this.selectedUsers.length) {
this.selectedUsers = [...this.template.userData];
} else {
this.selectedUsers = ;
}
}
And in my template I am using
<ion-toggle item-end color="secondary" checked="false" id="checkbox{{idx}}" [checked]="isSelected(user)" (ionChange)="toggleSelectedUser(user)"></ion-toggle>
Is selected simply does this:
isSelected(user) {
return this.selectedUsers.indexOf(user) >= 0;
}
Single toggles are working fine, however when I try to perform toggleSelectAll() I get the dreaded ExpressionChangedAfterItHasBeenCheckedError.
angular ionic-framework asked Nov 25 '18 at 12:32
TaylorsukTaylorsuk
772732
I've tried to implement all the recommended methods as suggested
Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error
ExpressionChangedAfterItHasBeenCheckedError Explained
However, either it's in combination with Ionic or my own developer skills that are letting me down, I am unable to get this to work without hitting the ExpressionChangedAfterItHasBeenCheckedError error.
I have a list of items that I would like to be able to select independently or allow the user to Select All.
In the .ts file I have two methods:
toggleSelectedUser(user) {
const index = this.selectedUsers.indexOf(user);
if (index >= 0) {
this.selectedUsers.splice(index, 1);
} else {
this.selectedUsers.push(user);
}
}
toggleSelectAll() {
if (!this.selectedUsers.length) {
this.selectedUsers = [...this.template.userData];
} else {
this.selectedUsers = ;
}
}
And in my template I am using
<ion-toggle item-end color="secondary" checked="false" id="checkbox{{idx}}" [checked]="isSelected(user)" (ionChange)="toggleSelectedUser(user)"></ion-toggle>
Is selected simply does this:
isSelected(user) {
return this.selectedUsers.indexOf(user) >= 0;
}
Single toggles are working fine, however when I try to perform toggleSelectAll() I get the dreaded ExpressionChangedAfterItHasBeenCheckedError.
angular ionic-framework angular ionic-framework asked Nov 25 '18 at 12:32
TaylorsukTaylorsuk
772732
asked Nov 25 '18 at 12:32
TaylorsukTaylorsuk
772732
asked Nov 25 '18 at 12:32
TaylorsukTaylorsuk
772732
asked Nov 25 '18 at 12:32
TaylorsukTaylorsuk
772732
asked Nov 25 '18 at 12:32
TaylorsukTaylorsuk
772732
772732
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
This is developing mode error first of all and should not come to the production environment. This error usually comes when the @Input data is been changed in the child component, as the change detection cycle runs when any changes are detected in the UI.
This error can be fixed calling detectChanges() method inside AfterContentChecked lifecycle hook. Or you can also use setTimeout() function to make you code async.
You can look into this article for detailed understanding.
https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
answered Nov 25 '18 at 12:49
Yashwardhan PauranikYashwardhan Pauranik
2,06111529
Hi, I've checked the link as I said in my question, however I am unable to implement it, I just get an infinite loop. Where in my code would I put thesetTimeoutto prevent my infinite loop?
– Taylorsuk
Nov 25 '18 at 12:58
@Taylorsuk yeah you can check by putting your code inside setTimeout
– Yashwardhan Pauranik
Nov 25 '18 at 12:59
I've tried this and I get an infinite loop.
– Taylorsuk
Nov 25 '18 at 13:22
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%2f53467470%2fionic-ionchange-giving-expressionchangedafterithasbeencheckederror%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
This is developing mode error first of all and should not come to the production environment. This error usually comes when the @Input data is been changed in the child component, as the change detection cycle runs when any changes are detected in the UI.
This error can be fixed calling detectChanges() method inside AfterContentChecked lifecycle hook. Or you can also use setTimeout() function to make you code async.
You can look into this article for detailed understanding.
https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
answered Nov 25 '18 at 12:49
Yashwardhan PauranikYashwardhan Pauranik
2,06111529
Hi, I've checked the link as I said in my question, however I am unable to implement it, I just get an infinite loop. Where in my code would I put thesetTimeoutto prevent my infinite loop?
– Taylorsuk
Nov 25 '18 at 12:58
@Taylorsuk yeah you can check by putting your code inside setTimeout
– Yashwardhan Pauranik
Nov 25 '18 at 12:59
I've tried this and I get an infinite loop.
– Taylorsuk
Nov 25 '18 at 13:22
add a comment |
This is developing mode error first of all and should not come to the production environment. This error usually comes when the @Input data is been changed in the child component, as the change detection cycle runs when any changes are detected in the UI.
This error can be fixed calling detectChanges() method inside AfterContentChecked lifecycle hook. Or you can also use setTimeout() function to make you code async.
You can look into this article for detailed understanding.
https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
answered Nov 25 '18 at 12:49
Yashwardhan PauranikYashwardhan Pauranik
2,06111529
Hi, I've checked the link as I said in my question, however I am unable to implement it, I just get an infinite loop. Where in my code would I put thesetTimeoutto prevent my infinite loop?
– Taylorsuk
Nov 25 '18 at 12:58
@Taylorsuk yeah you can check by putting your code inside setTimeout
– Yashwardhan Pauranik
Nov 25 '18 at 12:59
I've tried this and I get an infinite loop.
– Taylorsuk
Nov 25 '18 at 13:22
add a comment |
This is developing mode error first of all and should not come to the production environment. This error usually comes when the @Input data is been changed in the child component, as the change detection cycle runs when any changes are detected in the UI.
This error can be fixed calling detectChanges() method inside AfterContentChecked lifecycle hook. Or you can also use setTimeout() function to make you code async.
You can look into this article for detailed understanding.
https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
answered Nov 25 '18 at 12:49
Yashwardhan PauranikYashwardhan Pauranik
2,06111529
This is developing mode error first of all and should not come to the production environment. This error usually comes when the @Input data is been changed in the child component, as the change detection cycle runs when any changes are detected in the UI.
This error can be fixed calling detectChanges() method inside AfterContentChecked lifecycle hook. Or you can also use setTimeout() function to make you code async.
You can look into this article for detailed understanding.
https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
answered Nov 25 '18 at 12:49
Yashwardhan PauranikYashwardhan Pauranik
2,06111529
answered Nov 25 '18 at 12:49
Yashwardhan PauranikYashwardhan Pauranik
2,06111529
answered Nov 25 '18 at 12:49
Yashwardhan PauranikYashwardhan Pauranik
2,06111529
answered Nov 25 '18 at 12:49
Yashwardhan PauranikYashwardhan Pauranik
2,06111529
2,06111529
Hi, I've checked the link as I said in my question, however I am unable to implement it, I just get an infinite loop. Where in my code would I put thesetTimeoutto prevent my infinite loop?
– Taylorsuk
Nov 25 '18 at 12:58
@Taylorsuk yeah you can check by putting your code inside setTimeout
– Yashwardhan Pauranik
Nov 25 '18 at 12:59
I've tried this and I get an infinite loop.
– Taylorsuk
Nov 25 '18 at 13:22
add a comment |
Hi, I've checked the link as I said in my question, however I am unable to implement it, I just get an infinite loop. Where in my code would I put thesetTimeoutto prevent my infinite loop?
– Taylorsuk
Nov 25 '18 at 12:58
@Taylorsuk yeah you can check by putting your code inside setTimeout
– Yashwardhan Pauranik
Nov 25 '18 at 12:59
I've tried this and I get an infinite loop.
– Taylorsuk
Nov 25 '18 at 13:22
Hi, I've checked the link as I said in my question, however I am unable to implement it, I just get an infinite loop. Where in my code would I put the
setTimeout to prevent my infinite loop?– Taylorsuk
Nov 25 '18 at 12:58
Hi, I've checked the link as I said in my question, however I am unable to implement it, I just get an infinite loop. Where in my code would I put the
setTimeout to prevent my infinite loop?– Taylorsuk
Nov 25 '18 at 12:58
@Taylorsuk yeah you can check by putting your code inside setTimeout
– Yashwardhan Pauranik
Nov 25 '18 at 12:59
@Taylorsuk yeah you can check by putting your code inside setTimeout
– Yashwardhan Pauranik
Nov 25 '18 at 12:59
I've tried this and I get an infinite loop.
– Taylorsuk
Nov 25 '18 at 13:22
I've tried this and I get an infinite loop.
– Taylorsuk
Nov 25 '18 at 13:22
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%2f53467470%2fionic-ionchange-giving-expressionchangedafterithasbeencheckederror%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
