How use * ngIf to display a button if the key exists in ionic storage

Question

I working on a App that pulls simple online, json below.

json

this.itemList = { 
  "list": [
    {
      title: "Power Audit",
      text: "666",
      textTwo: "",
      Type: "auditform-main",
      link: this.linkOne
    },
    {
      title: "FLHA Three",
      text: "999",
      textTwo: "",
      Type: "form-main",
      link: this.linkFive
    }
  ]
};

and then an ion-card displays the the data.

Here is the html.

<ion-card  *ngFor="let data of itemList.list let i = index">
  <ion-card-content>
  <!-- saves data to ionic storage -->
  <div class = "linkDB" (click)="saveData(data.link)">
    Download {{data.title}}
  </div>

  <!--<div *ngIf="this.checkForKey(data.title) is true"> ****** Breaks App ****** -->
  <div>
    <!-- checks to see if storage key ionic storage exists -->
    <div class = "dbButton" (click)="checkForKey(data.title)">
      Check For storage key {{data.title}}
    </div>

    <div class = "dbButton" (click)="deleteKeyValue(data.title)" >
      Delete from storage {{data.title}}
    </div>
  </div>
</ion-card-content>

I have methods to (1) save the data to ionic storage, (2) Check if storage key exists, (3) Delete the storage key.
What I am trying to accomplish is hide the delete button if the storage key does not exist. I have tried an *ngIf statement using the checkForKey() method but this just goes into an infinite loop. I have also tried ngShow, but this also has not worked for me. Any help would be greatly appreciated.

ts

saveData(data) {
  this.storage.set( data.Name, JSON.stringify( data.Sections )).then(() => {
    this.listKeys();
  });
};

checkForKey(data) {
  this.storage.get(data).then(value => {
    if(value){
      console.log("true");
      return true
    }else{
      console.log("false");
      return false
    }
  }).catch(err=>{
    console.log(err)
  })
}

async deleteKeyValue(value: string) {
  const alert = await this.alertController.create({
    header: 'Confirm Deletion!',
    message: 'Delete this item <strong>?</strong>',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        handler: () => {
          console.log('Confirm Cancel: blah');
        }
      }, {
        text: 'DELETE',
        cssClass: 'delete',
        handler: () => {
          this.storage.remove(value).then(() => {
            this.listKeys();
          });
        }
      }

    ]
  });   
  await alert.present();  
}

Answer 1

You must never do this kind of method calls (ie checkForKey(data)) inside the Angular apps HTML template. Due to the change detection life cycle, it calls that method indefinitely and in the end, it directly leads to memory leaks and crashes the app.

You need to bring all the relevant data upfront here itemList.list and then use *ngIf like so:

<div *ngIf="data.isTrue> .... </div>  

Note: data.isTrue - this is just a fiction property. Just changes it according to your app.

Answer 2

What I ended up doing was using *ngIf="i == data.task" in line thirteen. So if the storage key does not exist

listKeys() {
  this.storage.keys().then((k) => {
    this.loop = k; 
  });
}

no div *ngFor="let i of loop" shows up.

<ion-card *ngFor="let data of itemList.list let i = index">
  <ion-card-header>
    <ion-card-title  class = "linkCenter">{{data.task}}</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <p>ID: <span style="color:#222428;" >{{data.formID}}</span></p>
    <p>Date: <span style="color:#222428;" >{{data.date}}</span></p>
    <p>Auditors: <span style="color:#222428;" ><b>{{data.auditors}}</b></span></p>
    <p>Inspection Type: <span style="color:#222428;" ><b>{{data.inspectionType}}</b></span></p>
    <div class = "linkCenter"> 
    <ion-button *ngIf= "data.downloadable == true" fill="outline" color="medium" (click)="saveData(data.link)" >Download</ion-button>
  </div>
    <div *ngFor="let i of loop">
      <div *ngIf="i == data.task">
        <div class = "linkButtons">
          <ion-button fill="outline" color="primary" (click)="openForm(data.Type, data.task)">&nbsp;&nbsp;Open&nbsp;&nbsp;</ion-button>
          <ion-button fill="outline" color="blackgreen" [disabled]="data.update == false" (click)="syncData()">Sync</ion-button>
          <ion-button fill="outline" color="danger" [disabled]="data.delete == false" (click)="deleteAudit( i )">Delete</ion-button>
        </div>
      </div>
    </div>
  </ion-card-content>
</ion-card>