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

• 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);
    }