最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

如何在Angular中选中多个复选框,其中复选框值在csv的一列数据库中?

运维笔记admin12浏览0评论

如何在Angular中选中多个复选框,其中复选框值在csv的一列数据库中?

如何在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;
    }
发布评论

评论列表(0)

  1. 暂无评论