Question

我有一个bootstrap模式对话框，其中包含一些复选框。每个复选框代表数据库中的一个类别，只有当用户对该类别感兴趣时，我才需要勾选复选框。

以下是我的模态的html

<div *ngIf="_user" id="categoryModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">

            <div class="modal-body" id="categoryDiv">
                <div class="row">
                  <div *ngIf="_tenderCategories">
                    <span *ngFor="let category of _tenderCategories; let i = index;">
                        <div class="col-md-4">
                            <div class="checkbox">
                                <label>
                                    <input id={{category.id}} type="checkbox" class="category-checkbox" [checked]="isUserInterested(category)" (change)="onCategoryCheckBoxClick(category)">
                                    <p class="tender-category" style="cursor: pointer;">{{category.name}}</p>

                                </label>
                            </div>
                        </div>
                    </span>
                  </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Submit</button>
            </div>
        </div>

    </div>
</div>

如您所见，为了勾选复选框，我调用函数isUserInterested(category)。

我面临的问题是，当页面仅重新加载时，我提到的函数被调用。当我点击我的html页面上的链接时，会出现上面的模式;但在这种情况下，函数不会被调用。当我单击上面提到的链接时，该组件具有该功能执行所需的所有数据。

isUserInterested(category: Category) {
   if (this._user.interestedCategories.indexOf(category) > -1) {
     // if the _user.interestedCategories list contaians the category, that category should be shown as marked
     console.log("Category "+category.id+" interested");
     return true;
   } else {
     return false;
   }
  }

为什么我没有得到预期的行为？我怎样才能以我期望的方式实现这一目标？

Answer 1

您应该使用ngModel来实现此目的，

<input id={{category.id}} type="checkbox" class="category-checkbox" 
    [ngModel]="isUserInterested(category)" 
    (ngModelChange)="onCategoryCheckBoxClick(category)">

更新1：内部模态对话框

子模型应包含users对象，如下所示

 @Input() users?:any[];

方法将为

isUserInterested(c){
      if(this.category.interestedCat.indexOf(c) > -1){
        console.log(c)
        return true;
      }
      else {

        return false
      }
    }

<强> Updated LIVE DEMO

有条件地勾选Angular中模态对话框中的复选框

1 个答案: