bind select option in Angular 13-CodePudding

I need some help in the binding the data with select option in Angular. i tried many ways but still didn't get the data in option. Can anyone please guide where i am wrong? Thanks in advance.

here is my dashboard.component.html

<div >
   <div >
      <label  for="input-email">Select Zone Name
        <span >*</span>
      </label>
      <select name="zone" >
        <option *ngfor="let ze of selectzone" [value]="ze.id">{{ze.zone}}</option>     
      </select>
   </div>          
</div>

and here is my dashboard.component.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ApplicationService } from 'src/app/services/application.service';
import { Location } from '@angular/common';
import { SelectZone } from './selectzone.model';

// core components


@Component({
  selector: 'app-select-zone',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
   constructor(private applicationService : ApplicationService, private router: Router, private location: Location) { 
    console.log(this.location.getState()); 
  }
  showZoneNotifiedScreen = false;
  selectzone: SelectZone[];
  async ngOnInit(): Promise<void> {
    this.selectzone = [{id:1,zone:"zoni"},{id:1,zone:"zon2"}];
  }
}

CodePudding user response：

You have a small typo in your options tag. change *ngfor to *ngFor and it should work. *ngFor should be camelCased.