标签: primeng-dropdowns

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

题

我有显示国家的p-down.我正确绑定选择选项,它工作正常(此数据来自api),但我需要为此p-dropdown设置默认选择选项为"India".

我将ng-model值设置为印度,但它不起作用.

我的dummy.component.html代码

<div class="form-group col-md-2">
    <div>
        <label for="inputEmail4"> Select Country</label>
        <span style="color:red">*</span>
    </div>
    <p-dropdown name="country" [options]="countries" [(ngModel)]="applicant.country" placeholder="select country"
        (onChange)="getStatebyCountry(applicant.country,$event)" #country="ngModel" required>
    </p-dropdown>
    <span *ngIf="country.invalid && (country.dirty || country.touched)">
        <span [hidden]="!country.hasError('required')" style="color:#ffa500">country is mandatory</span>
    </span>
</div>

我的dummy.component.ts

export class dummyComponent implements OnInit {
    //variable declaration scope for all controller function
    applicant: any = {};
    country: string; constructor() {
    }
    ngOnInit() {
        this.applicant.country = 'India';
    } 
    this.countries = [];
// this.countries.push({ label: 'Select Country', value: '' });
//getallcountries …

我正在使用PrimeNG具有自定义筛选和启用虚拟滚动功能的下拉组件。

我发现重新打开该组件时，它没有滚动回到视图列表中的最后一个选择，而是仅滚动回到列表的顶部，这意味着您必须进行物理滚动才能找到所做的选择。

看到这个例子stackblitz

我确实在这里遇到了一个解决方案，该解决方案涉及调用scrollToIndexCdkVirtualScrollViewport实例，这听起来像对我有用。但是，当我尝试将其合并到代码中时，实例变量显示为未定义。

有谁知道这里的正确方法？我正在使用PrimeNG 7.1.3。

谢谢

如何在primeng自动完成框中显示多个字段.

例如:

<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name,lastname"></p-autoComplete>

or 
<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name+' '+lastname"></p-autoComplete>

但是这不起作用.当我在一个字段属性中传递2个值时,如上所示,它不会在用户界面中显示任何值,对于单个值,它可以完美地工作

(例如:-field = "名称")

.

我正在使用 primeng 下拉菜单，并且很难将我的对象添加到下拉菜单中。它确实用空项目填充下拉列表..不知道如何指定字段名称。

超文本标记语言

<div class="form-group col-xs-3 col-md-3"
                                     [ngClass]="{
                                     'has-error':((ersaForm.get('costCenter').touched || ersaForm.get('costCenter').dirty ) && 
                                      !ersaForm.get('costCenter').valid) || (ersaForm.get('costCenter').value.cost_center_name == '')
                                     }">
 <label for="costCenterId" class="control-label">Cost Center</label>
 <p-dropdown [options]="iCostCenter" styleClass="form-control" formControlName="costCenter" placeholder="Cost Center (required)" id="costCenterId" name="costCenter"  dataKey="cost_center_id">
</p-dropdown>

目的

    {
  "result": [
    {
      "cost_center_id": 0,
      "cost_center_name": "0"
    },
    {
      "cost_center_id": 1,
      "cost_center_name": "1"
    },
    {
      "cost_center_id": 2,
      "cost_center_name": "2"
    },
}

TS

    export interface ICostCenter{

        cost_center_id: string,
        cost_center_name: string
    }

   iCostCenter: ICostCenter[];
    this._appParams.getAllCostCenters()
            .subscribe(
            data => {
                this.iCostCenter = data.result;

            }

我正在使用primeng 5.2.4并且我正在尝试这个:

<p-dropdown [options]="months" [(ngModel)]="selectedMonth"
   (change)="selectMonth()"></p-dropdown>

首次加载页面时会调用selectMonth方法,而下拉列表中的后续选择则不会调用selectMonth方法.如果我将其更改为单击事件它可以工作(但是在单击下拉列表时会出现一个事件,而在选择值时会出现另一个事件).

关于我可能做错的任何想法？我回滚到4.3.0并看到相同的行为.

谢谢!

我有一个使用PrimeNG组件的Angular2应用程序.

我想在对话框中输入一个下拉列表.但是,当我实现此功能时,下拉菜单会被对话框的限制所截断,如下面的屏幕截图所示.我想要的是它显示在对话框上方并显示所有选项.

它只是一个小对话框,我不想为此创建一个大的对话框,因为会有很多空的未使用空间.

我的html代码如下:

<p-dialog header="Repack" [(visible)]="display" showEffect="fade" minHeight="200">
    <div class="row col-md-12" align="center">
        <button pButton (click)="viewRepack()" label="View Repack"></button>
    </div>
    <div class="row col-md-12"><strong>Edit Table Assignment: </strong></div>
    <p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>
    <button pButton label="Save" (click)="save()" style="float:right;margin-right:3px;margin-top:5px;"></button>
</p-dialog>

如果有人可以就此提供任何建议,将不胜感激.

我正在使用 PrimeNG 的 p-dropdown 组件。当页面最初加载时，我正在设置，ng-model但下拉列表始终将第一个元素显示为所选元素。

超文本标记语言

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"  optionLabel="name" [showClear]="true"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

TS

this.cities = [
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];

即使我将其更改为其他城市，纽约也会在下拉列表中显示为所选城市。ng-model

我在我的角度应用程序中有带有一组值的 primeng 下拉菜单。

在视图 Screen 中，下拉列表不显示所选值（保存在数据库中的值），而是显示“选择”。

HTML：

<p-dropdown    [options]="reasons" [(ngModel)]="selectedReason"   (onChange)="getCompleteReason($event)" styleClass="ui-column-filter" filter="true"> </p-dropdown>

组件.ts

this.reasons = [];
    this.reasons.push({label: 'Select', value: null});
    this.reasons.push({label: 'Reason 1', value: 'Reason 1'});
    this.reasons.push({label: 'Reason 2', value: 'Reason 2'});
    this.reasons.push({label: 'Reason 3', value: 'Reason 3'});
    this.reasons.push({label: 'Other', value: 'Other'});


this.selectedReason = 'Reason 2' (eg value stored in the db)

在 Angular v7 项目中使用 PrimgNG v7.1.3。

在一个简单的组件中实现了 Multiselect ( https://www.primefaces.org/primeng-7.1.3/#/multiselect )。
需要在页面加载时设置焦点。

下面的解决方案适用于下拉但不适用于多选：

在 HTML 中： <p-dropdown #someDropdown></p-dropdown>

在组件中：

import { Dropdown } from 'primeng/dropdown';
@ViewChild('someDropdown') someDropdown: Dropdown;

this.someDropdown.applyFocus();

但是对于Multiselect，它会抛出这种方法无效的错误。

尝试了此 SO 链接中提到的“ngIf 中的控制”中的第一个答案，仍然没有运气：primeng：设置焦点控制也
检查了 PrimeNG 文档和用户指南，但没有提到聚焦功能。

后来也试了下。它都没有奏效。

this.someMultiSelect.focus();
this.someMultiSelect.applyFocus();

this.someMultiSelect.el.focus();
this.someMultiSelect.el.applyFocus();

this.someMultiSelect.el.nativeElement.focus();
this.someMultiSelect.el.nativeElement.applyFocus();

this.someMultiSelect.containerViewChild.focus();
this.someMultiSelect.containerViewChild.applyFocus();

this.someMultiSelect.containerViewChild.nativeElement.focus();
this.someMultiSelect.containerViewChild.nativeElement.applyFocus();

Stackblitz：https ://stackblitz.com/edit/primeng-multiselect-autofocus

请建议。

任何帮助表示赞赏。

我p-dropdown在我的应用程序中使用，并注意到升级到 PrimeNG 9 和 Angular 10 后，p-dropdown不再将自定义值作为默​​认值。相反，它采用选项列表中存在的第一个值作为默认值。此外，标签现在只填充下拉列表的一半，而重置只是空的。我怎样才能解决这个问题？提前致谢。

这是我的模板：

<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
    <p-dropdown [options]="cityList" tooltipPosition="left" [(ngModel)]="selectedCity" optionLabel="label"></p-dropdown>
    <p-dropdown [options]="carList" tooltipPosition="left" [(ngModel)]="selectedCar" optionLabel="label"></p-dropdown>
    </p-button>
</div>

这是我的 ts 代码：

this.carList = [{ label: 'BMW', value: 'BMW' },{ label: 'Tesla', value: 'Tesla' },{ label: 'Toyota', value: 'Toyota' }];
this.cityList = [{ label: 'New York', value: 'New York' },{ label: 'Chicago', value: 'Chicago' },{ label: 'Boston', value: 'Boston' }];


this.selectedCity = { label: 'None', value: 'None' };
this.selectedCar = …