Блог

Главная - Вопросы по программированию - Как я могу отображать элементы поля выбора в чипах?

Как я могу отображать элементы поля выбора в чипах?

#html #angular #typescript #primeng #chips

Вопрос:

Я хочу отображать данные в чипах с помощью selectBox, но у меня возникла проблема при отображении этих элементов следующим образом:

введите описание изображения здесь

Мои ТС:

 selectedPointsForts: any[]=[];
listPointsForts: any[]=[];

 SelectPointsForts() {
    this.PointsFortsService.findAll().then((res) => {
      this.listPointsForts= res.map(function(obj: any) {
        return {
          value: {
            id: obj.id,
            name: obj.libelle
          },
          label: obj.libelle
        };
      });
    });
  }

Мой HTML:

 <p-multiSelect [options]="listPointsForts" [(ngModel)]=" selectedPointsForts" [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}" [maxSelectedLabels]=2></p-multiSelect>
          <p>Selected Cars: </p>
          <p-chips [(ngModel)]=" selectedPointsForts"  > </p-chips>

Кто-нибудь может помочь мне решить эту проблему !

Ответ №1:

Вы можете поместить pTemplate <p-chips> элемент в, чтобы отформатировать вывод элементов микросхемы.

 <p-chips [(ngModel)]="selectedPointsForts">
  <ng-template let-item pTemplate="item">
    {{ item.id }} - {{ item.name }}
  </ng-template>
</p-chips>

Образец решения на СтекбЛитце

Выход

Рекомендации

Чипы (Пользовательский контент)

Комментарии:

1. Я поставил крест на слове !! Я имею в виду крестик пункта «Удалить» на этикетке !! знаете ли вы, в чем проблема, пожалуйста ?

2. Привет, ты имеешь в виду значок удаления элемента чипа? Если да, то это поведение по умолчанию для элемента чипа.

3. вот так files.fm/thumb_show.php?i=bn7u3xqsq ! есть ли какое-нибудь решение?

4. С вашей стороны это выглядит как проблема CSS. Вы можете настроить CSS с p-chips-token p-chips-token-label помощью классов и. Вы можете ознакомиться с разделом «Стиль «.

Метки: