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">
        <thead>
            <tr>
                <th colSpan="2"></th>

                <th [colSpan]="peopleGroups.length">
                    重量/克
                </th>

            </tr>
            <tr>

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

        </thead>
        <tbody>
            <ng-container *ngFor="let dish of currentDishs">
                <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)">
                                    <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.value | keyvalue">
                            {{g.value}}
                        </td>
                    </tr>
                </ng-container>
            </ng-container>

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