Как связать значение данных с флажком (установлен или не отмечен)

Question

У меня есть несколько флажков, и при событии Checked я отправляю на сервер идентификатор данных вместо значения 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

Я бы предложил вам изучить реактивные формы

<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

В начале вы создаете список массивов с помощью выбранного массива и массива базы данных (полный список массивов). custom = { идентификационный номер, имя: строка, проверил: логическое значение; }

Как: -

 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