How to populate drop-down menu with items from array

i am trying to populate the dropdown menu with items from an array as shown below in the code. when i run the app i just receive a button with text and clr-dropdown but no items show up

please let me know how to populate dropdown-menu with items from array

code:

<clr-dropdown>
            <button class="dropdown-toggle btn btn-primary">
                {{ "SITE.INSECTICIDES.TYPES_LABEL" | translate }} 
                <clr-icon shape="caret down"></clr-icon>
                <clr-dropdown-menu clrPosition="top-left">
                    <div class="dropdown-menu" *ngFor="let pesticide of pesticidesArray">
                        {{pesticide}}
                    </div>
                </clr-dropdown-menu>
            </button>
        </clr-dropdown>
        

ts:

  export class InesecticidesTypesAndDosesComponent implements OnInit {
  isBackDropModalVisible=false;
  modalContentVisible =false
  pesticidesArray = new Array();

  constructor() { 
    this.pesticidesArray = new Array();
    this.pesticidesArray.push(environment.Pesticide_type1)
    this.pesticidesArray.push(environment.Pesticide_type2)
    this.pesticidesArray.push(environment.Pesticide_type3)
    this.pesticidesArray.push(environment.Pesticide_type4)
    this.pesticidesArray.push(environment.Pesticide_type5)
  }

  ngOnInit(): void {
  }