CODEWITHSUNDEEP
angularangular5dropdownprimeng
Sangwin Gawande
Sangwin Gawande

Reputation: 8166

PrimeNG Dropdown Data is Not Being Displayed with Translate

I am trying to display translated list in PrimeNG dropdown.

HTML :

<p-dropdown [options]="companyProfileCategories" [(ngModel)]="CompanyCategoryId" [style]="{'width':'150px'}">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <div style="font-size:14px;margin-top:4px;color:white;">{{car.Name|json}}</div>
        </div>
    </ng-template>
</p-dropdown>

This is getting me data in console element like following :

Console Element Output

But the dropdown is still not displayed. Check Image.

Empty Dropdown

I have tried changing CSS and other styles.

Array Data :

companyProfileCategories = [{
    "ID": "SomeID",
    "Name": "ad_media"
}, {
    "ID": "SomeID2",
    "Name": "photos"
}]

Upvotes: 0

Views: 2826

Answers (1)

Gianluca Paris
Gianluca Paris

Reputation: 1429

According to documentation (https://www.primefaces.org/primeng/#/dropdown), the [options] array should be a SelectItem array, so it must have two required fields that are label and value, where value is the value of the dropdown and label is the displayed string. Your array should be like:

companyProfileCategories = [{
    "value": "SomeID",
    "label": "ad_media"
}, {
    "value": "SomeID2",
    "label": "photos"
}]

Upvotes: 2

Related Questions