在Angular中使用多个NGFOR时未定义的值？

Question

我正在使用角度的多个ngfor循环。我想选择一个月和年范围。因此，有4个下拉菜单（从一年，从月到，年限到年）。问题在于，我在不同阶段也尝试使用多个NGFOR循环，但也会发生同样的问题。 1个NGFO循环在HTML中工作正常，但是使用多个NGFOR循环，只有1个工作正常，而其余的值不确定值。请看看，谢谢。

html代码：

<div>
  <select name="monthf" id="monthf" [(ngModel)]="monthf" class="form-control" placeholder="monthf" >
    <option [value]="month" *ngFor="let month of months">{{month}}</option>
  </select>

  <p>selected: {{monthf}}</p>

  <select name="yearf" id="yearf" [(ngModel)]="yearf" class="form-control" placeholder="yearf" >
    <option [value]="yearf" *ngFor="let year of years">{{year}}</option>
  </select>

  <p>selected: {{yearf}}</p>
 
  <select name="montht" id="montht" [(ngModel)]="montht" class="form-control" placeholder="montht" >
    <option [value]="montht" *ngFor="let month of months">{{month}}</option>
  </select>

  <p>selected: {{montht}}</p>

  <select name="yeart" id="yeart" [(ngModel)]="yeart" class="form-control" placeholder="yeart" >
    <option [value]="yeart" *ngFor="let year of years">{{year}}</option>
  </select>

  <p>selected: {{yeart}}</p>
</div>

component.ts代码（仅从.ts文件中使用这些值，这就是为什么我只提到这些值）：

months:string[]=['January','February','March','April','May','June','July','August','September','October','November','December'];
years:number[]=Array.from(Array(50)).map((_, i) => 2000 + i);//generate 100 years from 2000 to 2100

结果：