如何在 Angular 6 的下拉选项中放置图像

Question

我想在下拉菜单中的文本旁边放一个图标或图像，但它没有出现。

我正在使用 Angular 6，我尝试了很多解决方案，但都没有奏效，我只想在下拉列表中的文本旁边放置一个标志。

<select class="form-control " name="country" required>
    <option *ngFor="let country of countries" [value]="country.name">
        <img class="" src="../../assets/icons/us.svg" />
        {{country.name}}
    </option>
</select>

Answer 1

通过使用 primeNg，我们可以使用 angular6 中的图像创建下拉菜单。

1.在项目中导入primeNg

npm install primeng --save
npm install primeicons --save

2。依赖关系

“依赖”：{ //... "primeng": "^7.0.0", “主图标”：“^1.0.0” },

3.样式配置

"styles": [
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css",
],

4.HTML 变化

<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" filter="true">
    <ng-template let-item pTemplate="selectedItem">
        <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
        <span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
    </ng-template>
</p-dropdown>

5.路径

assets/showcase/images/demo/car/{{item.label}}.png

Answer 2

如何在 Angular 6、7、8 [已解决] 中将图像放置在下拉选项中

如何在角度选择选项中插入图片

第一步：首先，安装 npm i ng-select2 npm 包。

step2 : 在你的 app.module.ts 中添加声明

import { NgSelect2Module } from 'ng-select2';

    @NgModule({
      imports: [
        ....,
        NgSelect2Module
      ],
      ...
    })

第三步：将代码添加到您的 html 文件中

 <ng-select2  [data]="managersList" name="users"
     formControlName="users" [options]="options">
    </ng-select2>

第四步：添加代码ts文件

export class dropDownImage implements OnInit {
  public exampleData: Array<Select2OptionData>;
  public options: Options;

  constructor(private service: DataService) { }

  ngOnInit() {
    this.exampleData = this.service.getTemplateList();
    this.options = {
      width: '300',
      templateResult: this.templateResult,
      templateSelection: this.templateSelection
    };
  }

  // function for result template
  public templateResult = (state: Select2OptionData): JQuery | string => {
    if (!state.id) {
      return state.text;
    }

    let image = '<span class="image"></span>';

    if (state.additional.image) {
      image = '<span class="image"><img src="' + state.additional.image + '"</span>';
    }

    return jQuery('<span><b>' + state.additional.winner + '.</b> ' + image + ' ' + state.text + '</span>');
  }

  // function for selection template
  public templateSelection = (state: Select2OptionData): JQuery | string => {
    if (!state.id) {
      return state.text;
    }

    return jQuery('<span><b>' + state.additional.winner + '.</b> ' + state.text + '</span>');
  }

}

第 5 步：您的 Json 响应类似于，

userslis ==>  [{
                "id":"1",
                 "text":"murali",
                 "image":"--path--"
               },
               {
                "id":"1",
                 "text":"murali_1",
                 "image":"--path--"
               },
               {
                "id":"1",
                 "text":"murali_2",
                 "image":"--path--"
               }]