如何在 Angular 中选中多个复选框，其中复选框值位于带有 csv 的数据库的一列中？

Question

editStatusObj.categories 值来自一列中的 (1,15,23) 等数据库，如果只有一个值可用，则显示复选框已选中，但如何使用角度中的多个值显示多个选中？

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.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

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

statuscategory.ts

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

Answer 1

我假设editStatusObj 是一个对象数组。

DEMO

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