Angular基于数组实现mat-select下拉框年份展示异常排查

下拉选项无法正常显示是两处代码逻辑错误导致的：

• 组件TS层未将获取到的年份数组绑定为组件类属性：你写的组件方法getUploadPeriod()仅在内部获取数组后返回，没有把结果赋值给组件实例的属性，模板中访问的years是未定义的空值。
• 模板层未遍历数组生成选项：你只写了单个<mat-option>标签，没有通过Angular的循环指令遍历年份数组生成对应数量的选项，即便拿到数组值也只会把整个数组塞进单个选项中，无法实现按年份选择的效果。

1. 调整组件TS代码 #

在组件中声明年份数组属性，在组件初始化阶段调用服务方法赋值，确保模板可以访问到该数组：

import { Component, OnInit } from '@angular/core';
// 其他已有依赖导入保持不变

@Component({
  // 组件元数据保持你原来的配置即可
})
export class YourUploadComponent implements OnInit {
  // 声明公共年份数组属性
  years: number[] = [];

  constructor(private uploadFacilityService: UploadFacilityService) {}

  ngOnInit(): void {
    // 组件初始化时拉取年份列表赋值
    this.years = this.uploadFacilityService.getUploadPeriod();
  }
}

你之前在组件中写的同名getUploadPeriod()方法没有实际赋值逻辑，可以直接删除，不需要额外保留。

2. 调整HTML模板代码 #

使用*ngFor指令遍历年份数组，为每一个年份生成单独的下拉选项，绑定对应的值：

<mat-select placeholder="Select Time Period">
  <mat-option *ngFor="let year of years" [value]="year">
    {{ year }}
  </mat-option>
</mat-select>

修改完成后重新运行项目，点击下拉选择器即可看到2020年至当前年份的所有选项，点击可正常选中。

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