Array is undefined: ERROR TypeError: Cannot read property 'push' of undefined

Question

I have an array that is not defined and my drop down is breaking however if I console.log the array I can see the values.

Here is my ts code

This fires onInit

rolesArr: SelectItem[];

let obj = {  1: "System Admin",  2: "Internal Account Manager",  3: "CAT Manager",
4: "HR Admin",  5: "HR Manager",  6: "HR Recruiter",  7: "Candidate",
8: "Operations administrator"},
result = Object.entries(obj).reduce((a, [label, value]) => 
a.concat({label, value}), []);
    this.rolesArr.push(...result);

Here is my HTML

<div class="ui-g-6 ui-sm-12">
  <div class="input-container">
    <label for="role">Role*</label>
    <p-dropdown [options]="rolesArr"
        formControlName="role" id="role" placeholder="Please select">
    </p-dropdown>
  </div>
</div>

Answer 1

You need to initialise the array as you have only declared it with a type. This means the array cannot be pushed to as it does not yet exist. Try declaring it with the correct type as an empty array.

public rolesArr: SelectItem[] = [];

Answer 2

Try to add ngIf

<div class="ui-g-6 ui-sm-12" *ngIf="rolesArr.length">
  <div class="input-container">
    <label for="role">Role*</label>
    <p-dropdown [options]="rolesArr" formControlName="role" id="role" placeholder="Please select"></p-dropdown>
  </div>
</div>

and you should set a default value for array

rolesArr: SelectItem[] = [];