我需要根据它的描述调整我的食物卡。如果它是null,那么它也应该与其他卡匹配,我可以使用什么? 我是从服务器获取值,如果描述为空,那么大小会受到干扰,所以想知道如何实现它。 作为它的引导程序
<div class="row">
<div class="col-3">
</div>
<div class="col">
<div class="row">
<ng-container *ngFor="let p of foodList; let i = index">
<div class="col">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{p.name}}</h5>
<p class="card-text">{{p.description}}</p>
<p class="card-text">{{p.availabletime}}</p>
<p class="card-text">{{p.price | currency:'INR'}}</p>
<p class="card-text">{{p.vegflag | uppercase}}</p>
<a href="#" ngModel name="addtocart" class="btn btn-primary">Add To Cart</a>
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
答案 0 :(得分:1)
只需使用if then else
<ng-container *ngFor="let p of foodList; let i = index">
<div class="col">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{
<ng-container *ngIf="!p.description; then view2; else view1">
</ng-container>
<ng-template #view1>
<p class="card-text">{{p.description}}</p>
</ng-template>
<ng-template #view2>
<p class="card-text">Add here details what you want to add</p>
</ng-template>
<p class="card-text">{{p.availabletime}}</p>
<p class="card-text">{{p.price | currency:'INR'}}</p>
<p class="card-text">{{p.vegflag | uppercase}}</p>
<a href="#" ngModel name="addtocart" class="btn btn-primary">Add To Cart</a>
</div>
</div>
</div>
<div *ngIf="(i + 1) % 2 === 0" class="w-100">Remove it If need just for managing space</div>
</ng-container>