Angular 使用复选框删除多行

我可以通过选中一个框来删除一行。当我尝试选择多个复选框时，当前复选框是唯一一个删除的行，保留了先前选中的复选框。下面是我的代码。请帮忙

//服务
从“@angular/core”导入{Injectable}；
从“RxJS/Rx”导入{Observable}；
从'@angular/Http'导入{Http，Response，Headers}；
@可注射（）
导出类食品服务{
构造函数（专用http:http）{
}
移除食物（id）{
返回此.http.delete（'http://example.com “+id）
.map（（response:response）=>response.json（））
}
}

//食品模块

出口级食品(
公众计数：数字；
公开价格：数字；
公共位置：字符串；
公共类型：字符串；
公共选择：字符串；
) { }

//餐桌

{{food.count}
{{食品.价格}
{{food.location}
{{food.type}

//食品成分

导出类FoodComponent{
食物：食物[]=[]；
构造函数（私有foodService:foodService）{}
选择食物：食物；
deleteFoodSelected（）{
this.foodService.RemoveFood（this.selectedFood.id）
.subscribe（数据=>{console.log（数据）}）
}
//复选框函数
复选框（食物）{
food.selected=（food.selected）？真：假；
这个。选择的食物=食物；
}
}

替换食物表中的代码

<td><input #{{food.count}} [(ngModel)]="food.selected" type="checkbox"></td>
  <td>{{food.count}}</td>
  <td>{{food.price}}</td>
  <td>{{food.location}}</td>
  <td>{{food.type}}</td>
</tr>
<button (click)="deleteFoodSelected()">DeleteSelectedFood</button>

在食品成分方面

 selectedFood : Food[];

     deleteFoodSelected(){
        this.selectedFood= this.Food.filter(_ => _.selected);
            for (var food in this.selectedFood) {
           this.foodService.RemoveFood(this.selectedFood[food].Id)
             .subscribe(data =>{
              console.log(data)
             }   
             )    
          }
}

//在职教师

    import {Injectable} from '@angular/core';
import {Observable} from "RxJS/Rx";
import {Http, Response, Headers} from '@angular/http';

@Injectable()

 export class FoodService {


  constructor(private http:Http) {


  }
  RemoveFood(id) {
    return this.http.delete('http://example.com ' + id)
      .map((response:Response) => response.json())
  }   
}

---

替换食物表中的代码

<td><input #{{food.count}} [(ngModel)]="food.selected" type="checkbox"></td>
  <td>{{food.count}}</td>
  <td>{{food.price}}</td>
  <td>{{food.location}}</td>
  <td>{{food.type}}</td>
</tr>
<button (click)="deleteFoodSelected()">DeleteSelectedFood</button>

在食品成分方面

 selectedFood : Food[];

     deleteFoodSelected(){
        this.selectedFood= this.Food.filter(_ => _.selected);
            for (var food in this.selectedFood) {
           this.foodService.RemoveFood(this.selectedFood[food].Id)
             .subscribe(data =>{
              console.log(data)
             }   
             )    
          }
}

//在职教师

    import {Injectable} from '@angular/core';
import {Observable} from "RxJS/Rx";
import {Http, Response, Headers} from '@angular/http';

@Injectable()

 export class FoodService {


  constructor(private http:Http) {


  }
  RemoveFood(id) {
    return this.http.delete('http://example.com ' + id)
      .map((response:Response) => response.json())
  }   
}

---

嗯，您需要循环浏览您的食物，找到所有选中的食物，并为每个食物的ID调用RemoveFood（）。@JBNizet这是什么意思？如果我做对了，我尝试在食物模块中使用所选字符串循环。您发布的唯一循环是用于显示所有食物的NGT。@JBNizet我被卡住了。你能帮我个忙吗？你为什么不试试呢？我已经告诉过你，你需要遍历食物，找到被选中的食物，然后用它们的ID调用RemoveFoo（）。这很简单。你应该知道如何在JavaScript中循环。好吧，你需要循环你的食物，找到所有选中的食物，并为每个食物的ID调用RemoveFood（）。@JBNizet这是什么意思？如果我做对了，我尝试在食物模块中使用所选字符串循环。您发布的唯一循环是用于显示所有食物的NGT。@JBNizet我被卡住了。你能帮我个忙吗？你为什么不试试呢？我已经告诉过你，你需要遍历食物，找到被选中的食物，然后用它们的ID调用RemoveFoo（）。这很简单。您应该知道如何在JavaScript中循环。