angular9中表格的全选，单选、提交数据例子

表格：

 <table class="table table-striped">
          <thead>
             <tr>
             <th scope="col">序号</th>
             <th><input type="checkbox" [(ngModel)]="all" (change)="allSelect()"/></th>
             <th scope="col">名称</th>
             <th scope="col">名称1</th>
             <th scope="col">名称2</th>
             <th scope="col">名称3</th>
             </tr>
             </thead>
             <tbody>
             <tr *ngFor="let country of members;index as i" class="tabeltr" >
             <th scope="row">{{i+1}}</th>
             <th><input type="checkbox" [(ngModel)]="country.isshow" (change)="listSelect(country)"/></th>
             <td>{{country.Name}}</td>
             <td>{{country.Name1}}</td>
             <td>{{country.Name2}}</td>
             <td>{{country.Name3}}</td>
             </tr>
             </tbody>
</table>
 <button type="button" class="btn btn-outline-dark" (click)="Submits()">确定</button>

ts部分

  // 全局勾选
  allSelect(){
    if(this.all){
      [this.members].forEach(function (value) {
        value.map(item=>{
        item.isshow= true;
        })
      });
  }else{
      [this.members].forEach(function (value) {
        value.map(item=>{
          item.isshow= false;
          })
      });
    }
 }

 // 单选勾选显示的效果
  listSelect(data){
    if(data.isshow){
      this.all = true;
    }else{
      if(this.members.findIndex(target=>target.isshow===true)==-1){
        this.all = false;
      }else {
        this.all = true;
      }
    }  
  }

  // 数据提交保存
  Submits(){
        var useList = [];
        this.members.forEach(function(value){
          if(value.isshow){
            useList.push({Name: value.Name});
          }
         })
         console.log(useList)
         return useList；
  }