Question

我需要根据它的描述调整我的食物卡。如果它是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>

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

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

1 个答案: