*ngIf - reference a property which needs to be set more than once
On Angular 6, I've got a WIJMO grid on my template. This grid pulls from a database table. Each row of the grid should have either a delete button or an un-delete button, depending on *ngIf else:
<wj-flex-grid>
<wj-flex-grid-column [header]="'ID'" [binding]="'ID'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'deleted'" [binding]="'deleted'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
<button *ngIf="!deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
My problem lies with setting this deleted property in the .ts file. I need to set and read this property multiple times AKA for every row of the table - but *ngIf only wants to use it after the last time it is defined.
So for my typescript, which uses a for loop on every data item and sets deleted property to true or false based on a database column, if the last row of the grid is marked as deleted in the database, then all the buttons will show undelete and vice versa:
export class myComponent extends WjFlexGridParent implements OnChanges, OnInit {
/////// deleted property //////
////// *ngIf only likes to read this after the last time it is defined //////
public deleted: boolean;
loadData() {
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
/////// delete/undelete logic //////
for (var i = 0; i < data.length; i++) {
if (data[i].deleted == null) {
this.deleted = false;
}
else if (data[i].deleted !== null) {
this.deleted = true;
}
}
errorCode => {
// this.statusMessage = "";
}
}
);
}
}
How can I get *ngIf to read this property after every time it is updated?
|
show 4 more comments
On Angular 6, I've got a WIJMO grid on my template. This grid pulls from a database table. Each row of the grid should have either a delete button or an un-delete button, depending on *ngIf else:
<wj-flex-grid>
<wj-flex-grid-column [header]="'ID'" [binding]="'ID'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'deleted'" [binding]="'deleted'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
<button *ngIf="!deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
My problem lies with setting this deleted property in the .ts file. I need to set and read this property multiple times AKA for every row of the table - but *ngIf only wants to use it after the last time it is defined.
So for my typescript, which uses a for loop on every data item and sets deleted property to true or false based on a database column, if the last row of the grid is marked as deleted in the database, then all the buttons will show undelete and vice versa:
export class myComponent extends WjFlexGridParent implements OnChanges, OnInit {
/////// deleted property //////
////// *ngIf only likes to read this after the last time it is defined //////
public deleted: boolean;
loadData() {
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
/////// delete/undelete logic //////
for (var i = 0; i < data.length; i++) {
if (data[i].deleted == null) {
this.deleted = false;
}
else if (data[i].deleted !== null) {
this.deleted = true;
}
}
errorCode => {
// this.statusMessage = "";
}
}
);
}
}
How can I get *ngIf to read this property after every time it is updated?
Are you doing*ngForto create the rows? I'm not sure I understand completely, but you need an array of delete flags, one for each row.
– Aragorn
Nov 28 '18 at 20:05
I'm not using*ngFor- WIJMO uses one line of code to generate the rows, which I have excluded above. It seems like*ngIfis only reading thedeletedproperty after thefor loophas completed. Thus, whatever the last row sets thedeletedproperty to, is what*ngIfuses for every row.
– Kyle Vassella
Nov 28 '18 at 20:09
Your loop doesn't make much sense. You're looping over an entire array but you're overwritingthis.deletedon every iteration. What is that value supposed to contain exactly?
– Jeto
Nov 28 '18 at 20:12
I was hoping*ngIfwould read the property on every iteration.deletedproperty is a boolean - true or false. We don't ever truly delete rows from our database - we instead mark a "Deleted" database column with eithernull(not deleted) or theIDnumber (deleted). This way if an admin needs to 'undelete' a row, they can.
– Kyle Vassella
Nov 28 '18 at 20:15
It looks like the data you are getting already has the deleted attribute, just use that , put the part of the code which creates the rows, I'll post answer based on that..
– Aragorn
Nov 28 '18 at 20:19
|
show 4 more comments
On Angular 6, I've got a WIJMO grid on my template. This grid pulls from a database table. Each row of the grid should have either a delete button or an un-delete button, depending on *ngIf else:
<wj-flex-grid>
<wj-flex-grid-column [header]="'ID'" [binding]="'ID'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'deleted'" [binding]="'deleted'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
<button *ngIf="!deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
My problem lies with setting this deleted property in the .ts file. I need to set and read this property multiple times AKA for every row of the table - but *ngIf only wants to use it after the last time it is defined.
So for my typescript, which uses a for loop on every data item and sets deleted property to true or false based on a database column, if the last row of the grid is marked as deleted in the database, then all the buttons will show undelete and vice versa:
export class myComponent extends WjFlexGridParent implements OnChanges, OnInit {
/////// deleted property //////
////// *ngIf only likes to read this after the last time it is defined //////
public deleted: boolean;
loadData() {
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
/////// delete/undelete logic //////
for (var i = 0; i < data.length; i++) {
if (data[i].deleted == null) {
this.deleted = false;
}
else if (data[i].deleted !== null) {
this.deleted = true;
}
}
errorCode => {
// this.statusMessage = "";
}
}
);
}
}
How can I get *ngIf to read this property after every time it is updated?
On Angular 6, I've got a WIJMO grid on my template. This grid pulls from a database table. Each row of the grid should have either a delete button or an un-delete button, depending on *ngIf else:
<wj-flex-grid>
<wj-flex-grid-column [header]="'ID'" [binding]="'ID'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'deleted'" [binding]="'deleted'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
<button *ngIf="!deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
My problem lies with setting this deleted property in the .ts file. I need to set and read this property multiple times AKA for every row of the table - but *ngIf only wants to use it after the last time it is defined.
So for my typescript, which uses a for loop on every data item and sets deleted property to true or false based on a database column, if the last row of the grid is marked as deleted in the database, then all the buttons will show undelete and vice versa:
export class myComponent extends WjFlexGridParent implements OnChanges, OnInit {
/////// deleted property //////
////// *ngIf only likes to read this after the last time it is defined //////
public deleted: boolean;
loadData() {
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
/////// delete/undelete logic //////
for (var i = 0; i < data.length; i++) {
if (data[i].deleted == null) {
this.deleted = false;
}
else if (data[i].deleted !== null) {
this.deleted = true;
}
}
errorCode => {
// this.statusMessage = "";
}
}
);
}
}
How can I get *ngIf to read this property after every time it is updated?
edited Nov 29 '18 at 19:31
Kyle Vassella
asked Nov 28 '18 at 19:52
Kyle VassellaKyle Vassella
5892629
5892629
Are you doing*ngForto create the rows? I'm not sure I understand completely, but you need an array of delete flags, one for each row.
– Aragorn
Nov 28 '18 at 20:05
I'm not using*ngFor- WIJMO uses one line of code to generate the rows, which I have excluded above. It seems like*ngIfis only reading thedeletedproperty after thefor loophas completed. Thus, whatever the last row sets thedeletedproperty to, is what*ngIfuses for every row.
– Kyle Vassella
Nov 28 '18 at 20:09
Your loop doesn't make much sense. You're looping over an entire array but you're overwritingthis.deletedon every iteration. What is that value supposed to contain exactly?
– Jeto
Nov 28 '18 at 20:12
I was hoping*ngIfwould read the property on every iteration.deletedproperty is a boolean - true or false. We don't ever truly delete rows from our database - we instead mark a "Deleted" database column with eithernull(not deleted) or theIDnumber (deleted). This way if an admin needs to 'undelete' a row, they can.
– Kyle Vassella
Nov 28 '18 at 20:15
It looks like the data you are getting already has the deleted attribute, just use that , put the part of the code which creates the rows, I'll post answer based on that..
– Aragorn
Nov 28 '18 at 20:19
|
show 4 more comments
Are you doing*ngForto create the rows? I'm not sure I understand completely, but you need an array of delete flags, one for each row.
– Aragorn
Nov 28 '18 at 20:05
I'm not using*ngFor- WIJMO uses one line of code to generate the rows, which I have excluded above. It seems like*ngIfis only reading thedeletedproperty after thefor loophas completed. Thus, whatever the last row sets thedeletedproperty to, is what*ngIfuses for every row.
– Kyle Vassella
Nov 28 '18 at 20:09
Your loop doesn't make much sense. You're looping over an entire array but you're overwritingthis.deletedon every iteration. What is that value supposed to contain exactly?
– Jeto
Nov 28 '18 at 20:12
I was hoping*ngIfwould read the property on every iteration.deletedproperty is a boolean - true or false. We don't ever truly delete rows from our database - we instead mark a "Deleted" database column with eithernull(not deleted) or theIDnumber (deleted). This way if an admin needs to 'undelete' a row, they can.
– Kyle Vassella
Nov 28 '18 at 20:15
It looks like the data you are getting already has the deleted attribute, just use that , put the part of the code which creates the rows, I'll post answer based on that..
– Aragorn
Nov 28 '18 at 20:19
Are you doing
*ngFor to create the rows? I'm not sure I understand completely, but you need an array of delete flags, one for each row.– Aragorn
Nov 28 '18 at 20:05
Are you doing
*ngFor to create the rows? I'm not sure I understand completely, but you need an array of delete flags, one for each row.– Aragorn
Nov 28 '18 at 20:05
I'm not using
*ngFor - WIJMO uses one line of code to generate the rows, which I have excluded above. It seems like *ngIf is only reading the deleted property after the for loop has completed. Thus, whatever the last row sets the deleted property to, is what *ngIf uses for every row.– Kyle Vassella
Nov 28 '18 at 20:09
I'm not using
*ngFor - WIJMO uses one line of code to generate the rows, which I have excluded above. It seems like *ngIf is only reading the deleted property after the for loop has completed. Thus, whatever the last row sets the deleted property to, is what *ngIf uses for every row.– Kyle Vassella
Nov 28 '18 at 20:09
Your loop doesn't make much sense. You're looping over an entire array but you're overwriting
this.deleted on every iteration. What is that value supposed to contain exactly?– Jeto
Nov 28 '18 at 20:12
Your loop doesn't make much sense. You're looping over an entire array but you're overwriting
this.deleted on every iteration. What is that value supposed to contain exactly?– Jeto
Nov 28 '18 at 20:12
I was hoping
*ngIf would read the property on every iteration. deleted property is a boolean - true or false. We don't ever truly delete rows from our database - we instead mark a "Deleted" database column with either null (not deleted) or the ID number (deleted). This way if an admin needs to 'undelete' a row, they can.– Kyle Vassella
Nov 28 '18 at 20:15
I was hoping
*ngIf would read the property on every iteration. deleted property is a boolean - true or false. We don't ever truly delete rows from our database - we instead mark a "Deleted" database column with either null (not deleted) or the ID number (deleted). This way if an admin needs to 'undelete' a row, they can.– Kyle Vassella
Nov 28 '18 at 20:15
It looks like the data you are getting already has the deleted attribute, just use that , put the part of the code which creates the rows, I'll post answer based on that..
– Aragorn
Nov 28 '18 at 20:19
It looks like the data you are getting already has the deleted attribute, just use that , put the part of the code which creates the rows, I'll post answer based on that..
– Aragorn
Nov 28 '18 at 20:19
|
show 4 more comments
1 Answer
1
active
oldest
votes
Solved - only one small line of code needed to be changed in the HTML, and the for loop in the .ts file can be completely removed.
Special thanks to Jeto and Aragorn in the comments section who pointed me in the right direction, and Sharad from GrapeCity (WIJMO) support for the final answer.
For all you WIJMO FlexGrid people, I just bound *ngIf to my items.deleted attribute in the html (similar to what Aragorn suggested when he wrote: 'It looks like the data you are getting already has the deleted attribute, just use that.').
HTML:
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
//// set *ngIf="!item.deleted" ////
<button *ngIf="!item.deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
TS:
loadData() {
var self = this;
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
//// for loop was not needed ////
},
errorCode => {
// this.statusMessage = "";
}
);
}
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%2f53527092%2fngif-reference-a-property-which-needs-to-be-set-more-than-once%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
Solved - only one small line of code needed to be changed in the HTML, and the for loop in the .ts file can be completely removed.
Special thanks to Jeto and Aragorn in the comments section who pointed me in the right direction, and Sharad from GrapeCity (WIJMO) support for the final answer.
For all you WIJMO FlexGrid people, I just bound *ngIf to my items.deleted attribute in the html (similar to what Aragorn suggested when he wrote: 'It looks like the data you are getting already has the deleted attribute, just use that.').
HTML:
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
//// set *ngIf="!item.deleted" ////
<button *ngIf="!item.deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
TS:
loadData() {
var self = this;
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
//// for loop was not needed ////
},
errorCode => {
// this.statusMessage = "";
}
);
}
add a comment |
Solved - only one small line of code needed to be changed in the HTML, and the for loop in the .ts file can be completely removed.
Special thanks to Jeto and Aragorn in the comments section who pointed me in the right direction, and Sharad from GrapeCity (WIJMO) support for the final answer.
For all you WIJMO FlexGrid people, I just bound *ngIf to my items.deleted attribute in the html (similar to what Aragorn suggested when he wrote: 'It looks like the data you are getting already has the deleted attribute, just use that.').
HTML:
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
//// set *ngIf="!item.deleted" ////
<button *ngIf="!item.deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
TS:
loadData() {
var self = this;
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
//// for loop was not needed ////
},
errorCode => {
// this.statusMessage = "";
}
);
}
add a comment |
Solved - only one small line of code needed to be changed in the HTML, and the for loop in the .ts file can be completely removed.
Special thanks to Jeto and Aragorn in the comments section who pointed me in the right direction, and Sharad from GrapeCity (WIJMO) support for the final answer.
For all you WIJMO FlexGrid people, I just bound *ngIf to my items.deleted attribute in the html (similar to what Aragorn suggested when he wrote: 'It looks like the data you are getting already has the deleted attribute, just use that.').
HTML:
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
//// set *ngIf="!item.deleted" ////
<button *ngIf="!item.deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
TS:
loadData() {
var self = this;
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
//// for loop was not needed ////
},
errorCode => {
// this.statusMessage = "";
}
);
}
Solved - only one small line of code needed to be changed in the HTML, and the for loop in the .ts file can be completely removed.
Special thanks to Jeto and Aragorn in the comments section who pointed me in the right direction, and Sharad from GrapeCity (WIJMO) support for the final answer.
For all you WIJMO FlexGrid people, I just bound *ngIf to my items.deleted attribute in the html (similar to what Aragorn suggested when he wrote: 'It looks like the data you are getting already has the deleted attribute, just use that.').
HTML:
<wj-flex-grid-column [header]="'delete/undelete buttons'" [binding]="'buttons'">
//// set *ngIf="!item.deleted" ////
<button *ngIf="!item.deleted; else unDeleted">Delete</button>
<ng-template #unDeleted>
<button>Un-Delete</button>
</ng-template>
</wj-flex-grid-column>
TS:
loadData() {
var self = this;
this.myDatabaseService.get(this.myApiPath)
.subscribe
(
data => {
this.setCollectionView(data);
this.m_collectionView.trackChanges = true;
//// for loop was not needed ////
},
errorCode => {
// this.statusMessage = "";
}
);
}
answered Nov 29 '18 at 19:29
Kyle VassellaKyle Vassella
5892629
5892629
add a comment |
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%2f53527092%2fngif-reference-a-property-which-needs-to-be-set-more-than-once%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
Are you doing
*ngForto create the rows? I'm not sure I understand completely, but you need an array of delete flags, one for each row.– Aragorn
Nov 28 '18 at 20:05
I'm not using
*ngFor- WIJMO uses one line of code to generate the rows, which I have excluded above. It seems like*ngIfis only reading thedeletedproperty after thefor loophas completed. Thus, whatever the last row sets thedeletedproperty to, is what*ngIfuses for every row.– Kyle Vassella
Nov 28 '18 at 20:09
Your loop doesn't make much sense. You're looping over an entire array but you're overwriting
this.deletedon every iteration. What is that value supposed to contain exactly?– Jeto
Nov 28 '18 at 20:12
I was hoping
*ngIfwould read the property on every iteration.deletedproperty is a boolean - true or false. We don't ever truly delete rows from our database - we instead mark a "Deleted" database column with eithernull(not deleted) or theIDnumber (deleted). This way if an admin needs to 'undelete' a row, they can.– Kyle Vassella
Nov 28 '18 at 20:15
It looks like the data you are getting already has the deleted attribute, just use that , put the part of the code which creates the rows, I'll post answer based on that..
– Aragorn
Nov 28 '18 at 20:19