如果鍵存在於離子存儲中，如何使用 * 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>