Nano Hash - криптовалюты, майнинг, программирование

Prime NG — раскрывающийся список с иконками

Можно ли поставить иконку на каждый пункт в выпадающем меню, если опции на нем содержат название иконки и название пункта?

этот код Prime NG у меня не работает:

<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" 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>
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
            <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
        </div>
    </ng-template>
</p-dropdown>

Мои варианты для выпадающего списка:

{  
   "id":17,     
   "configurationItem":{  
       "id":18,
       "icon":"ui-icon-view-list",
       "name":"View-List",         
    },     
}

Я хочу показать имя и значение «значка» в

<span class="configurationItem.icon">

angular primeng
26.02.2019

Ответы:


1

Да, это возможно, вы можете отображать либо только значок, либо и значок, и значение вашего предмета.

Сначала убедитесь, что вы используете PrimeNG v5 или выше.

<p-dropdown [options]="listItems" [(ngModel)]="selectedItem" >
<ng-template let-item pTemplate="selectedItem">
     <i class="{{item.label}}"></i>
</ng-template>
<ng-template let-object pTemplate="item">
     <i class="{{object.label}}"></i>
</ng-template>


listItems: SelectItem[];
this.listItems = [{label: 'fa fa-user', value: 'v1'}, {label: 'fa fa-user-cog', value: 'v2'}];

Make sure that you are using primeNg.SelectItem for your list of items.

26.02.2019
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..