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對象的屬性。

原作者:
...