如果键存在于离子存储中，如何使用 * 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 应用程序 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>