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

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>