Question

我想使用Angular 2和JavaScript＆amp; amp;创建一个包含项目符号的下拉列表。 CSS。我创建了一个下拉列表，但我无法在列表中创建项目符号。

这不能通过jQuery，Bootstrap来实现。有什么建议吗？

这是我的代码。

 dropdownList.component.ts

 import { Component} from '@angular/core';
 import{FormsModule } from '@angular/forms';
 import {Option} from './option';

 @Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
  })
  export class DropdownComponent {

  selectedItem:Option= new Option(1,'../../assets/blue2.png','option1');

  options= [
   new Option(1,'../../assets/blue2.png','option1'),
   new Option(2,'option2'),
   new Option(3,'option3'),
   new Option(4,'option4')

    ];

 // OPtion.ts


   export class Option{


    constructor(public id?: number, public img?:string, public name?: 
     string ) 
     {
      }
    }

   // component.html:


  <select class="dropdown" id="style">
  <option *ngFor="let Option of options" value={{Option.id}} 
   class="dropdownList">{{Option.name}}{{Option.img}}

   </option>
    </select>

Answer 1

CSS可以使任何东西看起来像其他东西。我实现了一个非常简单的下拉列表但只有真正的基本功能。要完成此下拉列表，您仍需要实现ngModel和label / value下拉项。但我认为这已经是你所描述的了。

import { Component } from '@angular/core'

@Component({
  selector: 'demo-dropdown',
  template: `
    <div class="ui-dropdown">
      <label class="ui-dropdown-label">{{selectedItem}}</label>
      <span class="ui-dropdown-button" (click)="showList = !showList">﹀</span>
      <ul class="ui-dropdown-list" [class.active]="showList">
        <li *ngFor="let item of items" (click)="onItemSelected($event)">{{item}}</li>
      </ul>
    </div>
  `,
  styles: [`
    *{
       box-sizing: border-box; 
    }
    .ui-dropdown{
      background: #fff;
      border: 1px solid black;
      border-radius: 3px;
      display: inline-flex;
      flex-wrap: wrap;
      padding: 0;
      user-select: none;
      width: 250px;
    }
    .ui-dropdown-label{
      flex: 1 1 0;
      padding: 0.2em 0.5em;
    }
    .ui-dropdown-button{
      border-left: 1px solid black;
      cursor: pointer;
      flex: 0 0 20px;
      padding-top: 0.2em 0.2;
    }
    .ui-dropdown-list{
      background: #fff;
      border: 1px solid black;
      border-radius: 3px;
      display: none;
      flex: 0 0 100%;
      margin: 0;
      margin-top: 25px;
      padding: 0;
      position: absolute;
      width: 250px;
    }
    .ui-dropdown-list.active{
      display: block;
    }
    .ui-dropdown-list>li{
      cursor: pointer;
      list-style: none;
    }
    .ui-dropdown-list>li::before{
      content: '．';
    }
    .ui-dropdown-list>li:hover{
      background: #eee;
    }
  `]
})
export class DemoDropdown{
  showList:boolean = false;
  selectedItem:string = null;
  items: OptionItem[] = ["option 1","option 2"];

  constructor() { }

  onItemSelected(e){
    this.selectedItem = e.target.innerText;
    this.showList = false;
  }
}

带子弹的下拉列表

1 个答案: