首页 > 解决方案 > 尝试区分“[object Object]”时出错。只允许数组和迭代 4 次

问题描述

我有 4 个下拉列表 -FromYear- -FromMonth- -ToYear- -ToMonth- 当我从第一个和第三个下拉列表中选择一年时,它应该获得一系列月份来填充我的其他下拉列表。我使用 selectFromYearsEvent 获得带有选定年份 ID 的月份

这是我的组件

export class CalendarComponent implements OnInit {

  year: number[];

  selectYears: Year[];

  selectedFromYear: Year;
  selectedToYear: Year;

  selectFromMonths: Month[];
  selectToMonths: Month[];

  selectedFromMonth: Month;
  selectedToMonth: Month;

  selectedMonths: Month[];

  months: Month[];

  constructor(private calendarService: CalendarService, private monthsService: MonthsService) {

  }

  ngOnInit() {
        this.getYears();
      }

  getYears() {
    this.calendarService.getYears().subscribe(y => {
      this.selectYears = y;
    });
  }

  getMonth() {
    this.calendarService.getYear(this.selectedFromYear.id).subscribe(y => {
      this.selectedFromYear.months = y;
      this.selectFromMonths = y;
    });
  }

  selectFromYearsEvent(newYear) {
    this.selectedFromYear = newYear;
    this.getMonth();

  }
}

这是我的 HTML 代码

<div class="container-calendar">
        <div class="calendar-dates">
        <!-- from part -->
        <div class="from-date">
          <div class="from-date-dropdown">
            <select name="fromYear" [(ngModel)]="selectYears" (ngModelChange)="selectFromYearsEvent($event)">      <!-- [(ngModel)]="selectedFromYear"> -->
              <option name="fromYear2" *ngFor="let year of selectYears" [ngValue]="year">                   
                  {{year.number}}
              </option>
            </select>
          </div>
        </div>
        <div class="from-date">
          <div class="state-dropdown">
            <select name="fromMonth" [(ngModel)]="selectFromMonths" (ngModelChange)="selectFromMonthEvent($event)"> <!-- [(ngModel)]="selectedFromMonth"> -->
              <option *ngFor='let month of selectFromMonth' [ngValue]="month"> 
                  {{month.name}}
              </option>
            </select>
          </div>
        </div>

标签: arraysangulardropdown

解决方案


推荐阅读