angular2 多 select 复选框

Question

您好，我是 angular2 的新手，刚开始输入脚本。我正在尝试在 angularjs2 中开发多选下拉列表。我的 html 如下所示。我从 Whosebug 引用了 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;
    }

我还声明了 expanded = false;在组件中。函数 showCheckboxes 是用 js 写的。我正在尝试用打字稿写同样的东西。有人可以帮我让它在 angular2 上工作吗？

Answer 1

我假设您了解 Angular 组件等基础知识。

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

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 多 select 复选框

angular2 multi select checkbox

html

angular2-directives