Question

我有几个复选框，并且在“已检查”事件中，我将数据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

str.replace(/\n/g, '&#10;')

代码

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

Answer 2

您可以在输入标签中设置[(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

Answer 3

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

赞：-

 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>

如何使用复选框绑定数据值（选中或未选中）

3 个答案: