diet-web-ui/projects/cdk/src/ingredient/ingredient-meals/ingredient-meals.component.html

<div>
    <div class="mb-3">
        <nz-space>
            <button *nzSpaceItem nz-button nzType="primary" (click)="shopDishForm()">
                添加菜品
            </button>
            <button *nzSpaceItem nz-button (click)="clearThisMeal()">
                清空本餐
            </button>
        </nz-space>
    </div>
    <nz-table nzTemplateMode [nzBordered]="true" nzSize="small" [nzScroll]="{ x: '1200px' }" class=" relative">
        <thead>
            <!-- <tr>
                <th nzWidth="300px"></th>
                <th nzWidth="200px"></th>

                <th [colSpan]="8">

                </th>

            </tr> -->
            <tr>
                <th nzWidth="300px" class="placeholder-th">
                    &nbsp;
                </th>
                <th nzWidth="200px">
                    <span class=" absolute top-2 left-[500px] z-10 w-[150px] h-[40px]">重量/克</span>
                </th>

                <th *ngFor="let p of peopleGroups; let last = last" [ngClass]="{'placeholder-th':!last}"
                    nzWidth="150px">

                </th>

            </tr>
            <tr>
                <th nzWidth="300px">
                    菜品
                </th>
                <th nzWidth="200px">
                    食材
                </th>
                <th *ngFor="let p of peopleGroups">
                    {{p}}
                </th>

            </tr>


        </thead>
        <tbody>
            <ng-container *ngFor="let dish of mealDishs;let dishIndex = index">
                <ng-container *ngIf="dish['mealIndex'] === mealIndex && dish['day'] === day">
                    <ng-container *ngFor="let food of dish['items'];let first = first;">
                        <tr>
                            <td *ngIf="first" [rowSpan]="dish['items'].length ">
                                <div class="flex justify-between">
                                    <span>
                                        {{dish['dishName']}}
                                    </span>
                                    <button nz-button nzType="text" (click)="onRemoveDish(dish,dishIndex)">
                                        <i nz-icon nzType="delete"></i>
                                    </button>
                                    <!-- nz-dropdown [nzDropdownMenu]="dishOptions" -->
                                    <!-- <nz-dropdown-menu #dishOptions="nzDropdownMenu">
                                    <ul nz-menu nzSelectable class=" w-20">
                                        <li nz-menu-item>编辑</li>
                                        <li nz-menu-item nzDanger>删除</li>
                                    </ul>
                                </nz-dropdown-menu> -->
                                </div>
                            </td>
                            <td>

                                <div class="flex justify-between">
                                    <span>
                                        {{food['foodName']}}
                                    </span>
                                    <!-- <button nz-button nzType="text" nz-dropdown [nzDropdownMenu]="foodOptions">
                                    <i nz-icon nzType="more"></i>
                                </button>
                                <nz-dropdown-menu #foodOptions="nzDropdownMenu">
                                    <ul nz-menu nzSelectable class="w-100">
                                        <li nz-menu-item>设置价格</li>
                                        <li nz-menu-item nzDanger>删除</li>
                                    </ul>
                                </nz-dropdown-menu> -->
                                </div>
                            </td>
                            <td *ngFor="let g of food['groupValues'] ">
                                <input nz-input type="number" [(ngModel)]="g.value" (ngModelChange)="onValueChange()" />
                            </td>

                        </tr>
                    </ng-container>

                </ng-container>

            </ng-container>
            <tr class="total">
                <td colSpan="2" class="text-center">
                    本餐生重总量
                </td>
                <td *ngFor="let p of peopleGroups">
                    {{totalObj[p]}}
                </td>

            </tr>
        </tbody>
    </nz-table>


    <!-- <nz-empty *ngIf="currentDishs.length === 0" class="empty"></nz-empty> -->
</div>

<ng-template #addDishFooter>
    <nz-space>
        <button *nzSpaceItem nz-button (click)="cancelForm()" type="button">
            取消
        </button>
        <button *nzSpaceItem nz-button nzType="primary" [nzLoading]="submitLoading" (click)="onSubmit()">
            保存
        </button>
    </nz-space>
</ng-template>