当 *ngIf 不存在时显示离子按钮

Question

我有一组显示下载按钮的卡片。如果我已经下载数据并将数据保存到数据库，我希望隐藏第一个 div 中的下载按钮，然后显示第二个 div。

<ion-card *ngFor="let data of itemList.list let i = index">
  <ion-card-content>

    <div> <!-- I want this to display if *ngIf="n == data.task does not display -->
      <ion-button (click)="saveData(data.link)" >Download for offline use</ion-button>
    </div>

    <div *ngFor="let n of loop"> <!-- loops through keys in database -->
      <div *ngIf="n == data.task"> <!-- if data.task key exists the buttons display -->
        <div class = "linkButtons">
          <ion-button (click)="openForm(data.Type, data.task)">&nbsp;&nbsp;Open&nbsp;&nbsp;</ion-button>
          <ion-button (click)="syncData()">Sync</ion-button>
          <ion-button (click)="deleteAudit( n )">Delete</ion-button>
        </div>
      </div>
    </div>

  </ion-card-content>
</ion-card>

Answer 1

您可能想使用 ngIf with else（我也稍微更改了您的模板的顺序；希望它有意义）：

<ion-card *ngFor="let data of itemList.list">
  <ion-card-content>

    <div *ngIf="n === data.task; else linkButtons">
      <ion-button (click)="saveData(data.link)">
        Download for offline use
      </ion-button>
    </div>

    <ng-template #linkButtons>
      <div *ngFor="let n of loop">
        <div class="linkButtons">
          <ion-button (click)="openForm(data.Type, data.task)">Open</ion-button>
          <ion-button (click)="syncData()">Sync</ion-button>
          <ion-button (click)="deleteAudit(n)">Delete</ion-button>
        </div>
      </div>
    </ng-template>

  </ion-card-content>
</ion-card>

Answer 2

您无法仅使用模板完成您想要做的事情，您可以详细了解原因。

您可以做的是使用 Map.

在您的组件中缓存结果

dataTasks = new Map<any, boolean>()
taskEquals(data: any, n: any) {
    if (!this.dataTasks.get(data)) {
        this.dataTasks.set(data, data.task == n)
    }
    return data.task == n
}

hasTask(data: any) {
    return !!this.dataTasks.get(data)
}

那么你的模板代码可以使用这些函数：

<ion-card *ngFor="let data of itemList.list let i = index">
  <ion-card-content>

    <div *ngIf="hasTask(data) == false">
      <ion-button (click)="saveData(data.link)">Download for offline use</ion-button>
    </div>

    <div *ngFor="let n of loop">
      <div *ngIf="taskEquals(data, n)">
        <div class = "linkButtons">
          <ion-button (click)="openForm(data.Type, data.task)">&nbsp;&nbsp;Open&nbsp;&nbsp;</ion-button>
          <ion-button (click)="syncData()">Sync</ion-button>
          <ion-button (click)="deleteAudit( n )">Delete</ion-button>
        </div>
      </div>
    </div>

  </ion-card-content>
</ion-card>

不使用 Map 的替代解决方案是将结果分配给 data 对象上的属性。

Answer 3

您可以在数据对象中使用本地布尔标志来检查数据是否已下载，saveDate(data) 函数也需要修改：

<ion-card *ngFor="let data of itemList.list let i = index">
  <ion-card-content>

    <div *ngIf="data.downloaded">
      <ion-button (click)="saveData(data)" >Download for offline use</ion-button>
    </div>

    <div *ngFor="let n of loop"> <!-- loops through keys in database -->
      <div *ngIf="n == data.task"> <!-- if data.task key exists the buttons display -->
        <div class = "linkButtons">
          <ion-button (click)="openForm(data.Type, data.task)">&nbsp;&nbsp;Open&nbsp;&nbsp;</ion-button>
          <ion-button (click)="syncData()">Sync</ion-button>
          <ion-button (click)="deleteAudit( n )">Delete</ion-button>
        </div>
      </div>
    </div>

  </ion-card-content>
</ion-card>

saveData(data){
    // remaining logic
    data.downloaded = !data.downloaded;
}

当 *ngIf 不存在时显示离子按钮

Show ion-button when *ngIf does not exist

typescript

angular

ionic4