*ngIf - reference a property which needs to be set more than once












0















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?










share|improve this question

























  • 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













  • 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













  • 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
















0















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?










share|improve this question

























  • 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













  • 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













  • 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














0












0








0








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?










share|improve this question
















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?







angular typescript angular6 angular-ng-if wijmo






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 29 '18 at 19:31







Kyle Vassella

















asked Nov 28 '18 at 19:52









Kyle VassellaKyle Vassella

5892629




5892629













  • 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













  • 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













  • 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











  • 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













  • 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

















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












1 Answer
1






active

oldest

votes


















0














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 = "";
}
);
}





share|improve this answer
























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    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 = "";
    }
    );
    }





    share|improve this answer




























      0














      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 = "";
      }
      );
      }





      share|improve this answer


























        0












        0








        0







        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 = "";
        }
        );
        }





        share|improve this answer













        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 = "";
        }
        );
        }






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 29 '18 at 19:29









        Kyle VassellaKyle Vassella

        5892629




        5892629
































            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Futebolista

            Lallio

            Jornalista