angular使用antd组件实现一次添加多条数据

最新推荐文章于 2022-03-21 20:06:49 发布

Aerfajj

最新推荐文章于 2022-03-21 20:06:49 发布

阅读量483

点赞数 1

分类专栏： Angular7 文章标签：添加多条数据 angular antd的使用

本文链接：https://blog.csdn.net/qq_43403486/article/details/100541631

版权

Angular7 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html模板
- add() 添加空对象
- reduce() 移除当前的item
- 注意点：由于餐厅名称和菜品类别使用的是标签动态渲染的下拉框，避免出现添加新的数据，之前的选择清空，select组件上不要设置id和name

 <div class="col-sm-12">
     <div class="panel">
         <div class="panel-body">
             <div class="col-md-12 pl0 pr0">
                 <div class="form-group">
                     <label class="control-label alignLeft col-sm-12 pl0 pr0 required-label"
                         >菜品添加： <a class="pull-right" (click)="add()">增加</a></label
                     >
                 </div>
             </div>
             <div class="col-md-12 pl0 pr0">
                 <div class="form-group" style="width:calc(100% - 40px)">
                     <label class="control-label alignLeft col-sm-3 pl5 pr5">菜品名称</label>
                     <label class="control-label alignLeft col-sm-3 pl5 pr5">菜品价格</label>
                     <label class="control-label alignLeft col-sm-3 pl5 pr5">餐厅名称</label>
                     <label class="control-label alignLeft col-sm-3 pl5 pr5">菜品类别</label>
                 </div>
             </div>
             <div class="col-md-12 pl0 pr0">
                 <div class="form-group" *ngFor="let item of foods; let tidx = index">
                     <div class="pull-left" style="width:calc(100% - 40px)">
                         <div class="form-group col-sm-3 pl5 pr5">
                             <input type="text" style="width:100%" [(ngModel)]="item.FoodName" [ngModelOptions]="{ standalone: true }" />
                         </div>
                         <div class="form-group col-sm-3 pl5 pr5">
                             <input type="text" style="width:100%" [(ngModel)]="item.Price" [ngModelOptions]="{ standalone: true }" />
                         </div>
                         <div class="form-group col-sm-3 pl5 pr5">
                             <select class="form-control" [(ngModel)]="item.restaurant">
                                 <option *ngFor="let x of restaurants; let cidx = index" [ngValue]="x">{{ x.Name }}</option>
                             </select>
                         </div>
                         <div class="form-group col-sm-3 pl5 pr5">
                             <select class="form-control" [(ngModel)]="item.caipfl">
                                 <option *ngFor="let x of caipfls; let caiidx = index" [ngValue]="x">{{ x.TagName }}</option>
                             </select>
                         </div>
                     </div>
                     <a (click)="reduce(item)" class="mt5 ml5">删除</a>
                 </div>
             </div>
         </div>
     </div>
 </div>

效果图

	// 声明容器，是一个空的数组
	foods: any[] = []

    // 添加菜品
    add() {
        this.foods.push({ restaurant: {} });
    }
    // 移除菜品
    reduce(item: any) {
        this.foods.remove(item);
    }