Как я могу откорректировать свою карту Food на основе описания Food, если оно пустое или пустое?

Question

Мне нужно откорректировать свою карточку питания, основываясь на ее описании. Если она равна нулю, то она должна совпадать и с другими карточками, что я могу использовать ???Я получаю значения с сервера, если описание пустое, то размер становится беспорядочным, поэтому я хочу знать, как мне этого добитьсяКак это бутстрап

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