концепция флажка с использованием angular5 и mongodb

Question

В этом коде я написал четыре интереса, например, когда пользователь выбирает 2 интереса, значения 2 флажков хранятся в mongodb. Я получаю сохраненные значения флажка в браузер от mongodb успешно. Но моя проблема состоит в том, чтобы показать оставшиеся непроверенные флажки браузеру?

мой код TS показывает значения флажков от mongodb для браузера, но я не могу показать не отмеченные флажки в браузере.

что мне нужно написать в моем запросе.

Спасибо.

мой компонент TS

interests = [
    { value: 'AGING-0', name: 'AGING', id: "1" },
    { value: 'AIDS-1', name: 'AIDS', id: "2" },
    { value: 'ALCOHOLISM-2', name: 'ALCOHOLISM', id: "3" },
    { value: 'ALLERGY-3', name: 'ALLERGY', id: "4" },]

мой HTML-компонент

        <h5>Please choose your speciality of Interest</h5>
        <div class="interests-list col-md-12">
        <li class="int-list col-md-3"  *ngFor="let interest of editUserDetails.basics[0].interest;let i = index">
              <label>
                      <input type="checkbox"
                             name="interest"
                             value="{{interest}}"        
                             [checked]="editUserDetails.basics[0].interest.indexOf(interest) >= 0"
                             (change)="updateCheckedOptions(interest, $event)"/>
                      {{interest}}
                  </label>  
        </li>
        </div>

Answer 1

Я создал стек, который будет проверять индекс на основе идентификатора. Флажок помечается как отмеченный, если он возвращает true.

https://stackblitz.com/edit/angular-qadydh

Answer 2

Машинописный код

interests = [
    { value: 'AGING-0', name: 'AGING', id: "1", checked: false },
    { value: 'AIDS-1', name: 'AIDS', id: "2", checked: false },
    { value: 'ALCOHOLISM-2', name: 'ALCOHOLISM', id: "3", checked: false },
    { value: 'ALLERGY-3', name: 'ALLERGY', id: "4", checked: false }];


isCheckBoxCheckedForUser(interest) {
// You can check the 
// editUserDetails.basics[0].interest == interest
// return true or false
}

HTML-код

// you should loop master interests list rather then editUserDetails.basics[0].interest

 <h5>Please choose your speciality of Interest</h5>
        <div class="interests-list col-md-12">
        <li class="int-list col-md-3"  *ngFor="let interest of interests;let i = index">
              <label>
                      <input type="checkbox"
                             name="interest"
                             value="{{interest}}"        
                             [checked]="isCheckBoxCheckedForUser(interest)"
                             (change)="updateCheckedOptions(interest, $event)"/>
                      {{interest}}
                  </label>  
        </li>
        </div>