我如何根据食物描述调整我的食物卡如果它是空的或空白的？答案

【问题标题】：How I can adjust my Food card based on Food description If it's null or blank?我如何根据食物描述调整我的食物卡如果它是空的或空白的？
【发布时间】：2018-05-25 23:07:09
【问题描述】：

我需要根据它的描述调整我的食物卡。如果它是空的，那么它也应该与其他卡匹配，我可以使用什么？？？如果描述为空白，我正在从服务器获取值，然后大小会受到干扰，所以我想知道如何实现它。因为它是引导程序

<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>

【问题讨论】：

我不太明白你的问题。您需要食品卡过滤器/搜索吗？
"根据描述调整我的食物卡"你想如何调整？
我正在从服务器描述中获取值是空白的，然后大小变得不安，所以想知道我如何实现它

标签： angular html bootstrap-4

【解决方案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>

【讨论】：