PrimeNG dropdown showing empty options

Question

My app UI is based on PrimeNG and i am working on dynamic forms and also getting form fields configuration through API. My PrimeNG dropdown is showing empty options. Here is the image for the reference:

Here is the code for PrimeNG dropdown:

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

With Bootstrap select it is working fine but i want to achieve this through PrimeNG, here is the code for 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>

Here is the data for dropdown i am getting from API: LookupVal: "KK-ID-IDEAS - KARACHI|00001-Karachi|KHI-KARACHI NEW |14121-BDJJSJBSJ"

Kindly help me find a way out?

Answer 1

you can just use it in the constructor like this, as stated by @JeremyLucas. Just use settimeout and if condition for it

 setTimeout(() => {
                 if(this.field.IsLookup == 'Y'){

        this.array = this.field.LookupVal.split('|').map((o) => ({
          label: o,
          value: o,
        }))
        console.log(this.array, "array");
        
        }
      
    
    }, 1000);