如何使用csv在Angular中选中复选框值位于数据库一列的多个复选框中？ [英] How can I make multiple checkboxes checked in Angular where checkbox value is in one column of database with csv?

问题描述

editStatusObj.categories 值来自一列中的（1,15,23）之类的数据库，如果只有一个值可用，则显示复选框已选中，但是如何我可以显示使用多个角度值进行多次检查吗？

editStatusObj.categories values comes from database like (1,15,23) in one column, if there is only one value available then it shows checkbox checked, but how can I show multiple checked using multiple values in angular?

edit-status.component.html

<div>
  <label *ngFor="let statusCategoryObj of statusCategoryObj"> 
    <mat-checkbox  value="{{statusCategoryObj.categorytitle}}" [checked]="statusCategoryObj.id == editStatusObj.categories" name="categories" (change)="onCheckboxChange(statusCategoryObj,$event)">
      {{statusCategoryObj.categorytitle}}</mat-checkbox> 
  </label>
</div>

edit-status.component.ts

editStatusObj : Status = new Status();
statusCategoryObj : Category[];

ngOnInit() {
 const id = +this.route.snapshot.paramMap.get('id');
  this.statusService.editStatusDetailsById({'id': id}).subscribe(
    (data) => {
      if(data.status == 28){
       editStatusObj.id = data.payload[0].id;
       editStatusObj.categories = data.payload[0].categories;
      }
    }
  )

  this.statusService.getCategoryInStatus(em).subscribe(
    (data) => {
      if(data.status == 23){
        statusCategoryObj.id = data.payload.id;
      }
    }
  );
}

app.js（节点边码）

app.js(node side code)

app.post('/editStatusDetailsById',function(req,res){
  connection.query('SELECT id,categories from status WHERE id = ?',[req.body.id], function (error, results, fields) {
  if (error) throw error;
   res.send({
     'status':'28',
     'success': 'true',
     'payload': results,
     'message':'one language is edited'
   });
  });
});

status.ts

status.ts

export class Status {
   constructor(public id : number = null,
               public languages : string = "") { }
}

statuscategory.ts

statuscategory.ts

export class StatusCategory {
constructor(public id : number = null,
            public categorytitle : string = "",
           ){}

推荐答案

我假设 editStatusObj 作为对象数组。

演示

HTML：

<div>
    <label *ngFor="let statusCategoryObj of statusCategoryObj;let i = index"> 
    <mat-checkbox  value="{{statusCategoryObj.categorytitle}}" [checked]="checkedCategories(statusCategoryObj.id)" name="categories" (change)="onCheckboxChange(statusCategoryObj,$event)">
      {{statusCategoryObj.categorytitle}}</mat-checkbox> 
  </label>
</div>

TS：

  categories: Array<any> = [];
  statusCategoryObj: Array<any> = [
    { category: 1, id: 1, categorytitle: 'cat 1' },
    { category: 2, id: 2, categorytitle: 'cat 2' },
    { category: 3, id: 3, categorytitle: 'cat 3' },
  ];

  editStatusObj: Array<any> = [
    { categories: '1,3,5', id: 1, categorytitle: 'cat 1' },
  ]
  ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('id');
    this.statusService.editStatusDetailsById({'id': id}).subscribe(
    (data) => {
      if(data.status == 28){
      this.editStatusObj.id = data.payload[0].id;
      this.editStatusObj.categories = data.payload[0].categories;
      this.allCategories = this.editStatusObj.categories.split(',');
     }        
    }
   )
  }

   checkedCategories(id){
     for(var i = 0 ; i < this.allCategories.length; i++){
       if(id == this.allCategories[i]){
         return true;
       }
     }  
      return false;
    }

这篇关于如何使用csv在Angular中选中复选框值位于数据库一列的多个复选框中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！