为何出现意外字符"EOF"？请求协助排查Angular代码问题

常见问题修复方案 #

• 移除空占位选项：代码中多余的<mat-option></mat-option>会生成空白选项，直接删除该行即可解决选择框出现无效空白项的问题。
• 确认数据绑定有效性：组件类中需正确定义selectedFood和foods数据，示例代码如下：

// 组件类内的数据定义
selectedFood: string; // 类型需与选项value一致
foods = [
  { value: 'steak-0', viewValue: '牛排' },
  { value: 'pizza-1', viewValue: '披萨' },
  { value: 'tacos-2', viewValue: '塔可' }
];

• 设置默认选中项：若需要页面加载时默认选中某个选项，直接给selectedFood赋值对应选项的value即可，比如selectedFood = 'pizza-1';。
• 兼容低版本Angular语法：@for是Angular 17+的语法，若使用更低版本，需替换为*ngFor语法，并添加跟踪函数优化性能：

// 组件类内的跟踪函数
trackOption(index: number, option: any) {
  return option.value; // 以选项唯一值作为跟踪标识
}

<!-- 低版本Angular对应的模板代码 -->
<mat-form-field>
  <mat-label>Favorite Food</mat-label>
  <mat-select [(value)]="selectedFood">
    <mat-option *ngFor="let option of foods; trackBy: trackOption" [value]="option.value">
      {{ option.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

修复后的完整模板代码（Angular 17+） #

<mat-form-field>
  <mat-label>Favorite Food</mat-label>
  <mat-select [(value)]="selectedFood">
    @for (option of foods; track option.value) {
      <mat-option [value]="option.value">{{ option.viewValue }}</mat-option>
    }
  </mat-select>
</mat-form-field>

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