时间戳

首页 > 解决方案 > 如果密钥存在于离子存储中，如何使用 * ngIf 显示按钮

angular - 如果密钥存在于离子存储中，如何使用 * ngIf 显示按钮

问题描述

我正在开发一个简单的在线应用程序，下面是 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();  
}

标签： angulartypescriptionic-frameworkionic4ionic-storage

解决方案

你绝不能做这种方法调用（即checkForKey(data))在 Angular 应用程序 HTML 模板中。由于变化检测生命周期，它会无限期地调用该方法，最终直接导致内存泄漏和应用程序崩溃。

您需要将所有相关数据提前带到这里itemList.list，然后*ngIf像这样使用：

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

注意： data.isTrue - 这只是一个虚构的财产。只需根据您的应用程序更改它。

推荐阅读