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

打字稿代码

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>

Answer 2

我创建了一个stackblitz，它将根据id检查索引。如果它返回true，则复选框将标记为已选中。

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

使用angular5和mongodb的复选框概念

2 个答案: