如何在Angular中选中多个复选框,其中复选框值在csv的一列数据库中?
editStatusObj.categories
值来自一列中的数据库(1,15,23),如果只有一个值可用则显示复选框已选中,但如何在角度中显示多个已检查的值?
编辑statusponent.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>
编辑statusponent.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 = "") { }
}
status categories.tf
export class StatusCategory {
constructor(public id : number = null,
public categorytitle : string = "",
){}
回答如下:
我假设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;
}