标签: primeng-dropdowns

现在，我正在使用 primeng 自动完成下拉菜单，在此我们没有清除/重置功能。

当我从下拉列表中选择结果时，输入中应出现一个清除/重置图标 (x)，单击 (x) 将清除输入框。

<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
            [dropdown]="true"></p-autoComplete>

任何人对此有任何更好的解决方案。

我的应用程序 UI 基于 PrimeNG，我正在处理动态表单，并通过 API 获取表单字段配置。我的 PrimeNG 下拉列表显示空选项。这是供参考的图像：

以下是 PrimeNG 下拉列表的代码：

 <p-dropdown *ngIf="field.IsLookup == 'Y'" [options]="field.LookupVal.split('|')" 
        [id]="field?.ColumnName"
        [formControlName]="field?.ColumnName"
      [showClear]="true">
</p-dropdown>

使用 Bootstrap select 它工作正常，但我想通过 PrimeNG 实现这一点，这里是 Bootstrap select 的代码：

 <select
      *ngIf="field.IsLookup == 'Y'"
        class="form-control"
        [id]="field?.ColumnName"
        [formControlName]="field?.ColumnName"
      >
        <option *ngFor="let opt of field.LookupVal.split('|')" [value]="opt">{{
          opt
        }}</option>
 </select>

以下是我从 API 获取的下拉列表数据： LookupVal: "KK-ID-IDEAS - KARACHI|00001-Karachi|KHI-KARACHI NEW |14121-BDJJSJBSJ"

请帮我找到出路吗？

我在我的 angular 应用程序中使用 PrimeNG，我有 p-dropdown 的问题

题

我有国家和 caste_category 的两个下拉菜单，我只为印度提供 caste_reservation ，如果选择其他国家/地区，则需要选择 caste_category 的 OPEN 选项并禁用该下拉菜单。

我在表中使用 p-autoComplete，一旦选择了一行，我的自动完成应该预先选择当前值。我尝试使用 [(ngModel)]="row.bsaName" 但它不起作用。（单击下拉菜单后，我会看到所有值，我确认这些值确实存在于我的 p-autoComplete 下拉菜单中）

另请注意，我使用了 p-calendar，一旦单击编辑，我就可以预先选择当前日期，并且不确定为什么自动完成不同

人TML

        <p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                     [rows]="10">

                <ng-template pTemplate="header">
                    <tr>
                        <th>ID</th>
                        <th>Followup DT</th>
                        <th>Comment</th>
                        <th>BSA Name</th>
                        <th>Action</th>

                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-row>
                    <tr>
                        <td>{{row.ID}}</td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.followupDate}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-calendar name="followupDate" [(ngModel)]="row.followupDate"  [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>
                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
                            <div *ngIf="row.isBSAEditable">
                                                                       <input type="text" [(ngModel)]="row.comment" style="width:95%" maxlength="200">
                                <span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
                            </div>
                        </td>


                        <td>
                            <div *ngIf="!row.isBSAEditable">{{row.bsaName}}</div>
                            <div *ngIf="row.isBSAEditable">

                                <p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="iBsaList"   (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" …

我正在使用ngPrime组件，如果我为它们设置样式，则样式不会应用在dashboard.component.sass文件上，但是当我使用全局style.sass文件时它们会适用。

dashboard.component.html文件

<p-dropdown [options]="reports" styleClass="report-dropdown">
      <ng-template let-item pTemplate="selectedItem">
        <i class="fas fa-th" style="fill: white;"></i>
        <span style="vertical-align:middle">
          {{item.label}}</span>
      </ng-template>
    </p-dropdown>

dashboard.component.scss和全局style.scss文件

.report-dropdown {
  .ui-dropdown-label {
    background-color: $secondary;
    color: white;
  }
  .ui-dropdown-trigger {
    color: white;
    background-color: $secondary;
    border: none;
  }
}

我想在我的应用程序中使用此PrimeNG-Dropdown。所以我做了什么：

npm i primeng --save

然后DropdownModule，我从中导入了app.module.ts。之后，我在html中包含以下代码：

<p-dropdown [options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown>

在运行ng serve和启动时localhost:4200，出现以下错误：

./node_modules/primeng/components/multiselect/multiselect.js找不到模块：错误：无法在'％projectroot％\ node_modules \ primeng \ components \ multiselect'中解析'@ angular / cdk / scrolling'

我还尝试从imports-Array中删除导入，这导致了另一个错误。我究竟做错了什么？我正在使用Angular 7 btw。

删除导入时，出现以下错误：

Can't bind to 'options' since it isn't a known property of 'p-dropdown'.
1. If 'p-dropdown' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'p-dropdown' is a …

我无法找到使用 prime ng 的角度项目的解决方案。我正在尝试对下拉值行进行列搜索。

如果我想查找所有“Jan”的值，则找不到数据。但是，如果我搜索“1”，它可以找到所有一月值。看起来它搜索的是值而不是标签。我如何使用标签来搜索它？

这是代码：

**HTML:**
<p-table #tt [value]="data" ....>

<input pInputText type="text" class="colmsearch"
placeholder="Search" 
(input)="tt.filter($event.target.value, 'month', 'contains')">

.
.
.
<p-dropdown formControlName="month" class="dropdownInput" *ngSwitchCase="'month'"
[options]="monthLabels"></p-dropdown>

</p-table>

**TS:**
this.data = [
    {id: 03, name: 'First', month: 1},
    {id: 04, name: 'Second', month: 2},
    {id: 05, name: 'Third', month: 1},
    .
    .
    {id: 07, name: 'Fourth', month: 3}

];

this.monthLabels = [
    {label: "Jan", value: 1},
    {label: "Feb", value: 2},
    {label: "Mar", value: 3},
    .
    .
    {label: "Dec", value: 12} …

我想在一个标签中设置两个值。例如，如果我打开下拉菜单，它应该显示为：

“值1 值2”

与空间在一条线上。value1数据value2是从数据库中获取的。我尝试使用下面的方法，但没有成功。

<p-dropdown [options]="divitionArr" name="business_divition" [(ngModel)]="project.business_divition" optionLabel="{'first_name','last_name'}" optionValue="divition" #diviSel="ngModel"></p-dropdown>

我正在研究 PrimeNG 组件。但是我在 Web 浏览器上的 UI 显示有问题。

现在，我想显示静态下拉列表。我参考了PrimeNG。以下代码用于显示该组件。

HTML文件

<h3 class="first">Single</h3>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

组件文件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  cities: SelectItem[];

  selectedCity: string;
  constructor() {
    this.cities = [];
    this.cities.push({ label: 'Select City', value: null });
    this.cities.push({ label: 'New York', value: { id: 1, name: 'New …

我正在实施自定义内容下拉列表。工作不正常。它不设置selectedTestType值，而是undefined在onChangeTestTypes.

<p-dropdown name="classTestTypeCombobox"
            [options]="TestTypes" [(ngModel)]="selectedTestType"
            [style]="{'width':'150px'}" filter="filter"
            [disabled]="this.isProdCodeDisabled"
            appendTo="body"
            required
            #classTestTypeCombobox="ngModel"
            (ngModelChange)="onChangeTestTypes($event)">
    <ng-template let-TestType pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <div>{{TestType.descLong}}</div>
        </div>
    </ng-template>
</p-dropdown>

TestTypes 是一个类对象数组，它有以下成员。

id: number;
classificationCode: string;
descLong: string;
classificationParent: string;
codeType: number;

onChangeTestTypes(TestType) {
    this.selectedTestTypeDesc = this.TestTypes.filter(x => x.priceCode == TestType)[0].descLong;
    this.price.Type = this.TestTypes.filter(x => x.priceCode == TestType)[0].Type;
}

我的问题与此处面临的问题非常相似： PrimeNG Chips 溢出行为

唯一的区别是我使用多选下拉菜单和显示：芯片作为设置之一。问题是，当我希望容器垂直扩展时，容器会继续水平拉伸并脱离页面。我想也许找到元素并使用上一个答案中建议的 CSS 会起作用，但无济于事......我尝试了以下方法：

::ng-deep .p-multiselect-label-container, .p-multiselect-chip {
  flex-wrap: wrap;
  align-content: space-between;
  padding-bottom: 0;
}

::ng-deep .p-multiselect-token, .p-multiselect-token-label {
  margin-bottom: 0.5rem;

非常感谢你的帮助。