Question

我有以下脚本：

this.employees.forEach( lpEmpl => {
  lpEmpl.vacation.forEach( lpVac => {
    const start = (new Date(lpVac.start)).toLocaleDateString('en-US', options);
    const end = (new Date(lpVac.end)).toLocaleDateString('en-US', options);
        retVal.push( {
          title: `${lpEmpl.lastname}`,
          start: `${start}`,
          end: `${end}`,
          color: '#efefef'
        });
      });
  });

我的课程如下：

export class Vacation {
   id: number;
  start: Date;
  end: Date;
}

export class Employee {
  id: number;
  lastname: string;
  firstname: string;
  email: string;
  availability: Availability;
  vacation: Vacation[];
}

当我启动应用程序并执行脚本时，它会无限循环地“结束”。为了找到错误，我调试了应用程序，但找不到任何错误。有趣的是，当我通过调试降低应用速度时，循环正常结束，并且数据显示正确。

是因为使用嵌套循环吗？

谢谢！

编辑：

组件：

@Component({
  selector: 'calendar',
  templateUrl: './calendar.html',
  styleUrls: ['./calendar.scss'],
  providers: [BaThemeConfigProvider, EmployeeService]
})

export class Calendar {

     calendarConfiguration: any;
     _calendar: Object;

    @Input()
    employees: Employee[];

   constructor(private _baConfig: BaThemeConfigProvider,
          private _basicTablesService: EmployeeService) {

     _basicTablesService.getEmployees().subscribe(results => this.employees = results);

    this.calendarConfiguration = this.getData();
    this.calendarConfiguration.select = (start, end) => this._onSelect(start, end);
  }

  public onCalendarReady(calendar):void {
    this._calendar = calendar;
  }

  private getData(): any {
    const dashboardColors = this._baConfig.get().colors.dashboard;

    return {
       header: {
         left: 'prev,next today',
         center: 'title',
         right: 'month,agendaWeek,agendaDay'
       },
       defaultDate: '2018-10-26',
       selectable: true,
       selectHelper: true,
       editable: true,
       eventLimit: true,
       events: this.printDays()
     };
   }

   private _onSelect(start, end): void {

     if (this._calendar !== null) {
       let title = prompt('Event Title:');
       let eventData;
       if (title) {
         eventData = {
           title: title,
          start: start,
           end: end
         };
         jQuery(this._calendar).fullCalendar('renderEvent', eventData, true);
       }
       jQuery(this._calendar).fullCalendar('unselect');
     }
   }
  private printDays(): any {
    const retVal = [];

    const options: Intl.DateTimeFormatOptions = {
     day: '2-digit', month: '2-digit', year: 'numeric'
    };

    this.employees.forEach( lpEmpl => {
      lpEmpl.vacation.forEach( lpVac => {
        const start = (new Date(lpVac.start)).toLocaleDateString('en-US', options);
        const end = (new Date(lpVac.end)).toLocaleDateString('en-US', options);
        retVal.push( {
          title: `${lpEmpl.lastname}`,
          start: `${start}`,
          end: `${end}`,
          color: '#efefef'
        });
      });
  });
  return retVal;
  }

视图：

  <ba-full-calendar [baFullCalendarConfiguration]="calendarConfiguration" 
       baFullCalendarClass="blurCalendar" 
       (onCalendarReady)="onCalendarReady($event)">
  </ba-full-calendar>

嵌入式组件：

@Component({
   selector: 'ba-full-calendar',
   templateUrl: './baFullCalendar.html'
  })
 export class BaFullCalendar {

  @Input() baFullCalendarConfiguration:Object;
  @Input() baFullCalendarClass:string;
  @Output() onCalendarReady = new EventEmitter<any>();

  @ViewChild('baFullCalendar') public _selector:ElementRef;

  ngAfterViewInit() {
    let calendar = jQuery(this._selector.nativeElement).fullCalendar(this.baFullCalendarConfiguration);
    this.onCalendarReady.emit(calendar);
  }
}

我使用akveo的模板，该模板提供压延组件。因此，我无法在此处发布完整的代码。

Answer 1

问题是对JS的异步性质的误解，订阅回调在http://example.com/institution/gallery之后被调用。重构为此：

getData

虽然我们忽略了在有角度的应用程序中使用constructor( private _baConfig: BaThemeConfigProvider, private _basicTablesService: EmployeeService ) {} ngAfterViewInit(): void { this._basicTablesService.getEmployees().subscribe(results => { this.employees = results; this.calendarConfiguration = this.getData(); this.calendarConfiguration.select = (start, end) => this._onSelect(start, end); let calendar = jQuery(this._selector.nativeElement).fullCalendar( this.baFullCalendarConfiguration ); this.onCalendarReady.emit(calendar); }); }的事实；）无论如何，这确实是一种竞赛条件，只有通过使用断点才能获胜。这确保了对数据的请求已完成，因此已经设置了jQuery值。没有断点，this.employees在http请求完成之前被调用。

Typescript-循环中的无限循环

1 个答案: