Angular 13中Select选项数据绑定问题求助

我在Angular中尝试将数据绑定到Select选项时遇到问题，尝试了多种方法仍无法在选项中显示数据，恳请各位帮忙排查问题，提前感谢。

dashboard.component.html代码 #

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

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"}];
  }
}

问题排查与解决 #

• 指令大小写错误：HTML里的*ngfor是错误写法，Angular的结构型指令严格区分大小写，正确应为*ngFor，这是数据无法渲染的核心原因。修改后下拉框就能正常遍历selectzone数组显示选项。

• 缺失Router导入：TS代码中构造函数注入了Router，但未导入对应模块，会引发编译错误。需要在导入区域添加：

  import { Router } from '@angular/router';
  

• 可选优化：给selectzone设置初始空数组，避免组件初始化阶段出现undefined状态：

  selectzone: SelectZone[] = [];
  

内容的提问来源于stack exchange，提问作者hamza_dilber