复选框未显示在引导下拉列表中

Question

我试图在引导下拉菜单中简单地显示一个复选框，但它只是显示为空白。这是一个通用的下拉菜单。下面我展示了我的代码和一些屏幕截图。我觉得这有点奇怪，不确定这是否有棱角。

stackblitz 网址：

https://stackblitz.com/edit/angular-45uk59

代码：

<div class="form-group">
  <label *ngIf='label!=null' for={{id}}>{{label}}}</label>
  <select class="form-control" id="{{id}}">
    <option value="-1"></option>
    <option *ngFor="let item of content; let i = index" value="{{item.value}}">
      <span *ngIf='hasCheckbox === true'>
        <!-- <input type="checkbox" id="{{id}}_i" /> &nbsp -->
        <input type="checkbox" name="item.text[{{i}}]" value="{{item.value}}" /> &nbsp;
      </span>
      {{item.text}}
    </option>
  </select>
</div>

组件：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {

  content: DropDownContent[] = new Array<DropDownContent>();

  @Input() hasCheckbox:boolean = false;
  @Input() label:string  = null;
  @Input() id:string = 'defaultId'
  @Input() selectedId:number = -1;
  @Input() size: 'lg' | 'md' | 'sm' = 'lg';
  @Input() set contentInput(contentInput: DropDownContent[]) {
    if (contentInput) {
      this.content = contentInput.map(data => {
        return <DropDownContent>(data);
      });

      console.log(this.content);
    } else {
      //?
    }
  }

  constructor() { }

  ngOnInit() {
    console.log(this.id)
  }
}

export class DropDownContent {
  value: number;
  text: string;
}

截图：

代码：

Answer 1

我建议使用带有表情符号的纯文本，而不是复选框。它将在 hasCheckbox 属性的帮助下使用 ngIf 显示和隐藏，并结合一个新属性来跟踪所选元素：

export class DropDownContent {
  value: number;
  text: string;
  selected: boolean

}    
...
this.contentInput = [{
      "value": 0,
      "text": "Users",
      "selected": true
    },
    {...

所以模板可以是：

<select id="{{id}}" multiple>
    <option (dblclick)="item.selected=!item.selected" *ngFor="let item of content; let i = index" value="{{item.value}}">
      <span *ngIf="item.selected && hasCheckbox">✓</span>
      {{item.text}}
    </option>
</select>

Demo

Answer 2

您可以将 div 包装成一种类似于 hack 的形式。不完全是你想要的，但它有效：

HTML

<form>
  <div class="selectthingy">
    <div class="Box" onclick="showMeTheBoxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="checkboxselect"></div>
    </div>
    <div id="boxes_wrapper">
      <label for="one">
        <input type="checkbox" id="1" />SALSA</label>
      <label for="two">
        <input type="checkbox" id="2" />MUMBA</label>
      <label for="three">
        <input type="checkbox" id="3" />CHICKEN DANCE</label>
    </div>
  </div>
</form>

CSS

.selectthingy{
  width: 300px;
}

.Box {
  position: relative;
}

.Box select {
  width: 100%;
}

.checkboxselect {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
}

#boxes_wrapper {
  display: none;
  border: 1px green solid;
}

#boxes_wrapper label {
  display: block;
}

#boxes_wrapper label:hover {
  background-color: blue;
}

JS

var boxthingy= false;

function showMeTheBoxes() {
  var boxes = document.getElementById("boxes_wrapper");
  if (!boxthingy) {
    boxes.style.display = "block";
    boxthingy= true;
  } else {
    boxes.style.display = "none";
    boxthingy= false;
  }
}

https://codepen.io/Archtects/pen/LmpLZr