如果键存在于离子存储中，如何使用 * ngIf 显示按钮

Question

我正在开发一个简单在线的应用程序，json 下面。

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

然后离子卡显示数据。

这里是 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>

我有方法 (1) 将数据保存到离子存储，(2) 检查存储键是否存在，(3) 删除存储键。
如果存储密钥不存在，我想要完成的是隐藏删除按钮。我已经尝试使用 checkForKey() 方法的 *ngIf 语句，但这只会进入无限循环。我也尝试过 ngShow，但这对我也没有用。任何帮助将不胜感激。

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

您绝不能调用这种方法（即 Angular apps HTML 模板中的 checkForKey(data))。由于更改检测生命周期，它会无限期地调用该方法，并且最后直接导致内存泄露，导致应用崩溃。

您需要在此处预先提供所有相关数据 itemList.list，然后像这样使用 *ngIf：

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

注： data.isTrue - 这只是虚构的属性。只需根据您的应用程序进行更改即可。

Answer 2

我最后做的是在第十三行使用 *ngIf="i == data.task" 。所以如果存储键不存在

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

没有 div *ngFor="let i of loop" 出现了。

<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>

如果键存在于离子存储中，如何使用 * ngIf 显示按钮

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

typescript

ionic-framework

angular

ionic-storage

ionic4