CODEWITHSUNDEEP
javascriptangulartypescriptprimeng
Eugene Sukh
Eugene Sukh

Reputation: 2737

Cannot bind ngModel to p-dropdown value (Angular)

I using PrimeNg dropdown

Here is html of template

<div>
  <label>{{ l('Portfolio') }}</label>
  <p-dropdown
    [(ngModel)]="property.portfolioId"
    [disabled]="!landlordPortfolios.length"
    [options]="landlordPortfolios"
    autoWidth="false"
    [style]="{ width: '100%' }"
    name="landlordPortfolio"
    [autoWidth]="true"
  ></p-dropdown>
</div>

I get values for dropdown via this method

getLandlordPortfoliosById(landlordId: number): void {
  this.landlordPortfolios = [];

  this._landlordPortfolios.getPortfolioDropdownValuesById(landlordId).subscribe(result => {
    result.items.forEach(value => {
      this.landlordPortfolios.push({
        label: value.name,
        value: value.id,
      });
    });
  });
}

And call it like this

if (this.property.landlordId) {
  this.getLandlordPortfoliosById(this.property.landlordId);

  this.initLandlordSuggestionsById(this.property.landlordId);
}

For example I have landlordId = 1 and selected option for dropdown must be also with id = 1. Here is result

enter image description here But I get selected item in dropdown, just blank field, and I see all options when click dropdown. Where can be my problem?

Upvotes: 2

Views: 3431

Answers (1)

Eugene Sukh
Eugene Sukh

Reputation: 2737

So problem was in data request/get

if I set *ngIf to dropdown, like this *ngIf = "landlordPortfolios.length" and delete [disabled], all going well.

Upvotes: 2

Related Questions