others - typeScript - ion-button *ngIf不存在

赏金过期在7天内这个问题的答案符合+50信誉bounty,托马斯Degroot正在从可靠来源查找答案,

我希望在第一个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> 



时间: 原作者:

你可能是想使用ngIf的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>



原作者:


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对象的属性。

原作者:
...