时间戳

首页 > 解决方案 > 使用 angular5 和 mongodb 的复选框概念

angular - 使用 angular5 和 mongodb 的复选框概念

问题描述

在这段代码中，我写了四个兴趣，例如当用户选择 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>

标签： angularmongodb

解决方案

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

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

推荐阅读