Question

您好我是angular2和type脚本的新手。我正在尝试在angularjs2中开发多选下拉列表。我有我的简单html如下。我从stackoverflow中提到How to use Checkbox inside Select Option。

   <div class="selectBox" (click)="showCheckboxes()">
                            </div>

                            <div id="checkboxes" [style.display]="expanded ? 'block' : 'none'">
                                <label for="one">
                                    <input type="checkbox" id="one" />First checkbox
                                </label>
                                <label for="two">
                                    <input type="checkbox" id="two" />Second checkbox
                                </label>
                                <label for="three">
                                    <input type="checkbox" id="three" />Third checkbox
                                </label>
                            </div>

组件中的

 showCheckboxes() {
     expanded =expanded;
    }

我也声明expand = false;在组件中。函数showCheckboxes是用js编写的。我试图在类型脚本中写同样的东西。有人可以帮助我使它在angular2上工作吗？

Answer 1

我假设您已经了解角度基础知识，例如组件。

因此组件中的方法应如下所示：

expanded = false;
showCheckboxes() {
  expanded = !expanded;
}

您的HTML：

<div class="selectBox" (click)="showCheckboxes()">
   ....
</div>

<div id="checkboxes" [style.display]="expanded ? 'block' : 'none'">
   ....
</div>

或者你甚至可以删除方法并将代码移动到HTML：

<div class="selectBox" (click)="expanded=!expanded;">

在您的组件中，您只会离开：

expanded = false;

angular2多选复选框

1 个答案: