title: Empty dropdown selected value
body: <p>I'm using Angular5 and primeng library. Particularly, I have problem with p-dropdown. I have one big entity - Consignment - with many fields, I open page with this saved object. And several p-dropdown elements(here it is contract component) dont' display selected value. But, I'm sure that there are no object's empty fields. It seems, like array, which linked with p-dropdown options property, is still empty when @Input() field related with p-dropdown ngModel is not. How I can fill in options array before ngModel field will initiated?Or may be there is another problem? My code below:</p>
  
  <p>Html template:</p>
  
  <pre><code>&lt;div class="form-group ui-float-label"&gt;
    &lt;p-dropdown [options]="selectItems" [(ngModel)]="contract" [filter]="true" (onChange)="onContractSelect()"
                [style]="{'width':'100%'}" id="contract" placeholder="Select a contract" [required]="required" &gt;&lt;/p-dropdown&gt;
    &lt;label for="contract" [hidden]="contract == null"&gt;Contract&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Component code:</p>
  
  <pre><code>export class SelectContractComponent implements OnChanges{
    public contracts : Contract[] = [];
    @Input() contract: Contract;
    @Output() contractChange = new EventEmitter();
    @Input() contractor: Contractor;
    selectItems: SelectItem[]= [];
  
    @Input() disabled: boolean;
    @Input() required: boolean;
  
    constructor(
      private contractService: ContractService) {
    }
  
  
    ngOnChanges(changes: SimpleChanges): void {
      this.getAllContracts();
      const contractor: SimpleChange = changes.contractor;
      this.selectItems = [];
      if (contractor != null &amp;&amp; contractor.currentValue != null){
        this.getContractsByContractor();
      }
    }
  
    private fillSelectItems(contract: Contract){
      this.selectItems.push({label: contract.name, value: contract});
    }
  
    getContractsByContractor():void {
      this.contractService.getContractsByContractor(this.contractor.id)
        .subscribe(contracts =&gt; {
          this.contracts = contracts;
          this.contracts.forEach(c =&gt; this.fillSelectItems(c));
        });
    }
  
    getAllContracts():void{
      this.contractService.getContracts()
        .subscribe(contracts =&gt; {
          this.contracts = contracts;
          this.contracts.forEach(c =&gt; this.fillSelectItems(c));
        });
    }
  
    public onContractSelect(){
      this.contractChange.emit(this.contract);
    }
  
  }
  </code></pre>
  
  <p>Fragment from Consignment template:</p>
  
  <pre><code>&lt;app-select-contract [(contract)]="consignment.costPayerContract" [contractor]="consignment.costPayer"
                                       *ngIf="consignment.costPayer"&gt;&lt;/app-select-contract&gt;
  </code></pre>