如何将数据值与复选框绑定（选中或未选中）

Question

我有几个复选框，在 Checked 事件中我将数据 id 提交回服务器而不是 true 或 false 值，但我无法在重新加载页面后绑定复选框状态。如何检查复选框值是否存在于数据库中？

这是我的 HTML 代码

<span *ngFor = "let groupid of result" >
                        <ng-container *ngIf ="regTypeSelectedOption === 'my group'">
                      <div *ngFor="let group of my_groupList; let i = index" >
                             <label>
                                <input type="checkbox" value="{{group._id}"
                                 [name]="videodisplaygroup"
                              [checked] = "group._id ==groupid.id"

                                 (change)="getCheckboxValues($event,group)" />
                                <span innerHTML="{{group.group_name}}"></span>
                            </label>
                        </div>
                    </ng-container>
                </span >

Answer 1

我建议你看看reactive forms

<input type="checkbox" [fromControl]="myValue"/>

代码

myValue = new FormControl(); // property inside of component class
myValue.valueChanges.subscribe((v)=>{ console.log('value changed')}); // Can be in constructor or ngInit
myValue.setValue(true| false) // When your server returns data

Answer 2

在开始时，您在选定数组和数据库数组（完整数组列表）的帮助下创建一个数组列表。 自定义 = { 身份证号码， 名称：字符串， 检查：布尔值； }

喜欢：-

 full_Array [] = [{id:1, name= "mohan"},{id:1, name= "Sachin"},{id:1,name= "Azhar"}]
 selected_Array [] = [{id:1, name= "Sachin"}]  // data come from API
 own_Array [] = [];

现在创建了你自己的数组列表 -

          for(let j=0; j< selected_Array.length; j++){
               for(let i=0; i< full_Array.length; i++){
                  if(selected_Array[j].id === full_Array[i].id ){
                      var data = new this.custom();
                           data.id = selected_Array[j].id;
                           data.name = selected_Array[j].name;
                           data.selected = true;
                           this.own_Array.push(data);
                     }else{
                           var data = new this.custom();
                           data.id = selected_Array[j].id;
                           data.name = selected_Array[j].name;
                           data.selected = false;
                           this.own_Array.push(data);
                         }
               }
                   }

<tr *ngFor="let contactCard of own_Array">
 <td>
  <input type="checkbox" name="optionsCheckboxes" checked="" 
        [(ngModel)]="contactCard.selected" (change)="checkContact(contactCard)" required>
 </td>
</tr>

Answer 3

您可以在输入标签中设置[(ngModel)]="fromDB.checked"

<input type="checkbox" name="checkbox{{fromDB.docId}}" 
  [(ngModel)]="fromDB.checked" (change)="checkboxClicked()" />

假设来自数据库的数据

fromDB = 
    {
      docId:1,
      docName:'Test name',
      checked: true
    };

随着您的源代码更改为

<div *ngFor="let group of my_groupList; let i = index" >
    <label>
      <input 
          type="checkbox"
          value="{{group._id}"
          [(ngModel)] = "group.checked"
          [name]="videodisplaygroup"       
          (change)="getCheckboxValues($event,group)" />
      <span innerHTML="{{group.group_name}}"></span>
    </label>
  </div>

更新：

使用更新的代码，您不需要使用 2 循环，您应该处理 my_groupList 添加基于结果对象检查的属性。此行checked: this.result.find(d => d.id == c._id) 确认检查了什么项目。

this.my_groupList = this.my_groupList.map(c => 
  { return { _id: c._id, group_name: c.group_name, 
    checked: this.result.find(d => d.id == c._id) }; 
  })

演示https://stackblitz.com/edit/angular-gru8a2?file=src%2Fapp%2Fapp.component.ts