Angular 使用复选框删除所选项目

由于复选框，我正在寻找所选项目的多次删除。我使用此链接创建我的列表。然后，我在页面顶部用以下html创建了一个删除按钮：

删除第一行
场地
{{value}}
菲利埃
{{value}}
类型
{{value}}
类型源
{{value}}

但是，我没有成功地使用函数

onRemoveRow（selected）

删除所选行。我试图在所有行和所选行之间使用限制，但我确实没有找到解决方案。

---

如果有人有想法，我只是在寻找建议或更好的方法。

你可以这样做

这里用HTML实现这一点：

    <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
     <div>
   <button class="mt-1 mr-1 ml-1 mb-1" md-raised-button color="primary"(click)="addcontact()">New</button>
    <button class="btn btn-success mr-1 mb-1"  style="float: right;"  [disabled]="buttonDisabled" (click)="multiplecontactdel()">Delete</button>   
   </div>
   <div class="pt-2 pb-2 pl-2 pr-2 mat-white box-inset mb-2">
    </div>
             <div class="force-card-content">
                <div class="table-responsive">
                        <ngx-datatable
                        class="material"
                        [selectionType]="'checkbox'"  
                        (activate)="onActivate($event)"
                        (select)='onSelectNew($event)'
                        [selected]="selected"
                        [rows]="rows"    
                        [sortType]="'multi'"
                        [columnMode]="'flex'"
                        [headerHeight]="50"
                        [footerHeight]="50"
                        [rowHeight]="auto"
                        [limit]="10">                        
                        <ngx-datatable-column name="Email" prop="WorkEmail" [flexGrow]="4"></ngx-datatable-column> 
                        <ngx-datatable-column name="Account Name" prop="AccountName" [flexGrow]="4" ></ngx-datatable-column>                         
                        <ngx-datatable-column [flexGrow]="1"  [headerCheckboxable]="true"
                        [checkboxable]="true" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">
                        </ngx-datatable-column>   
                      </ngx-datatable>                    
                </div>  
            </div>
  </div>
  </div>

新的
删除

并在Codebehind中实现这一点：

    "use strict";
import { Component, OnInit, ViewEncapsulation, ViewContainerRef } from '@angular/core';
import { Router } from "@angular/router";
import { Http, RequestOptions, Headers, Response } from '@angular/http';
import { PageTitleService } from '../../core/page-title/page-title.service';
import { fadeInAnimation } from "../../core/route-animation/route.animation";
import { ApiService } from '../../api/api.service';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
import { MdDialogRef, MdDialog, MdDialogConfig } from "@angular/material";
import { AlertsService, DemoDialog3 } from '../../api/alerts.service';
@Component({
  selector: 'ms-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.scss'],
  encapsulation: ViewEncapsulation.None,
  host: {
    "[@fadeInAnimation]": 'true'
  },
  animations: [fadeInAnimation]
})
export class ContactsComponent implements OnInit {
  dialogRef: MdDialogRef<DemoDialog3>;
  result: string;
  buttonDisabled: boolean;  
  tdata: any;
  mdeleteid = [];
  rows = [];
  temp = [];
  filteredData = [];
  data = []; 
  selected = []; 
  selectedContacts = []; 
  constructor(private router: Router, private api: ApiService) {

    this.fetch1((data) => {      
      this.temp = [...data];      
      this.rows = data;
      this.filteredData = data;      
    });
  }
  ngOnInit() {this.buttonDisabled = true;}
  fetch1(cb) {
    this.pageTitleService.setTitle("Contacts");
    var $scope = this;
    var Tid = localStorage.TenantId;
    this.api.postPromise('api/Contacts/GetContacts?Tid=' + Tid, null).then(
      function (data) {cb(data);},
      function (err) {
        console.log(err);
        alert("Error");
      });
  }
  onSelectNew({ selected }) {
    var $scope = this;
    if (selected.length > 0) {this.buttonDisabled = false;}
    else { this.buttonDisabled = true; }
    this.selected.splice(0, this.selected.length);
    this.selected.push(...selected);
  } 
multiplecontactdel() {    
    var $scope = this;
    $scope.selectedContacts.push(...this.selected);         
        this.api.postPromise('api/Contacts/ContactsMultipleDelete', $scope.selectedContacts).then( //getting data from api
          function (data) {           
            if (data.Message == "Successfull") {
              $scope.selectedContacts = [];
              $scope.toastr.success("Contact Deleted Successfully");
              $scope.fetch1((data) => {
                $scope.temp = [...data];
                $scope.rows = data;
              });              
            }
            else {
              $scope.toastr.success("Cant't delete");             
            }
          },
          function (err) {console.log(err);});      
    this.selected = [];
  }
 }

“严格使用”；
从“@angular/core”导入{Component，OnInit，ViewEncapsulation，ViewContainerRef}；
从“@angular/Router”导入{Router}”；
从'@angular/Http'导入{Http，RequestOptions，Headers，Response}；
从“../../core/page title/page title.service”导入{PageTitleService}；
从“../../core/route animation/route.animation”导入{fadeInAnimation}”；
从“../../api/api.service”导入{ApiService}；
从“ng2 toastr/ng2 toastr”导入{toastmanager}；
从“@angular/material”导入{MdDialogRef，MdDialog，MdDialogConfig}；
从“../../api/alerts.service”导入{AlertsService，DemoDialog3}；
@组成部分({
选择器：“ms联系人”，
templateUrl:'./contacts.component.html'，
样式URL:['./contacts.component.scss']，
封装：视图封装。无，
主持人:{
“[@fadeInAnimation]”：“正确”
},
动画：[fadeInAnimation]
})
导出类Contacts组件实现OnInit{
dialogRef:MdDialogRef；
结果：字符串；
按钮禁用：布尔值；
tdata：任何；
mdeleteid=[]；
行=[]；
温度=[]；
filteredData=[]；
数据=[]；
选定=[]；
selectedContacts=[]；
构造函数（专用路由器：路由器，专用api:ApiService）{
this.fetch1（（数据）=>{
this.temp=[…数据]；
this.rows=数据；
this.filteredData=数据；
});
}
ngOnInit（）{this.buttonDisabled=true；}
第1条（cb）{
此.pageTitleService.setTitle（“联系人”）；
var$scope=this；
var Tid=localStorage.TenantId；
this.api.postPromise（'api/Contacts/GetContacts？Tid='+Tid，null）。然后(
函数（数据）{cb（数据）；}，
功能（err）{
控制台日志（err）；
警报（“错误”）；
});
}
onSelectNew（{selected}）{
var$scope=this；
如果（selected.length>0）{this.buttonDisabled=false；}
else{this.buttonDisabled=true；}
此选定拼接（0，此选定长度）；
此.selected.push（…selected）；
} 
multiplecontactdel（）{
var$scope=this；
$scope.selectedContacts.push（…this.selected）；
this.api.postPromise（'api/Contacts/Contacts多重删除'，$scope.selectedContacts）。然后（//从api获取数据
函数（数据）{
如果（data.Message==“成功”）{
$scope.selectedContacts=[]；
$scope.toastr.success（“成功删除联系人”）；
$scope.fetch1（（数据）=>{
$scope.temp=[…数据]；
$scope.rows=数据；
});              
}
否则{
$scope.toastr.success（“无法删除”）；
}
},
函数（err）{console.log（err）；}；
this.selected=[]；
}
}

其枚举分配问题

导入它

import { SelectionType } from '@swimlane/ngx-datatable';

申报

selection: SelectionType;

初始化它

constructor() { this.selection = SelectionType.checkbox; }; 构造函数（）{ this.selection=SelectionType.checkbox； };