我正在开发一个涉及季节和日历的应用程序。
我可以使它在本地运行，但是当我将其部署到Azure Web应用程序时，即使数据和代码完全相同，也会收到一条错误消息。
ERROR RangeError: Invalid array length
at w.getDays (11.5e980b78c274ae5687fd.chunk.js:1)
at new w (11.5e980b78c274ae5687fd.chunk.js:1)
at ns (main.af3705283ae2dd27e166.bundle.js:1)
at Jr (main.af3705283ae2dd27e166.bundle.js:1)
at As (main.af3705283ae2dd27e166.bundle.js:1)
at Is (main.af3705283ae2dd27e166.bundle.js:1)
at Object.Ws [as createRootView] (main.af3705283ae2dd27e166.bundle.js:1)
at Sr.create (main.af3705283ae2dd27e166.bundle.js:1)
at ae.create (main.af3705283ae2dd27e166.bundle.js:1)
at t._getContentRef (main.af3705283ae2dd27e166.bundle.js:1)
当我尝试通过单击按钮打开引导程序模态时出现错误消息，该按钮通过传入列表行中的数据来加载模态组件。
我知道错误不在于传递的数据，因为我在本地和Azure上使用完全相同的数据。可能是某种天蓝色的不兼容问题吗？
以下是打开该组件的代码：
onAddClick() {
const modalRef = this.modalService.show(EditSeasonComponent, {
initialState: {
calendarId: this.selectedCalendarId,
}
});
this.modalCloseSubscription = (<EditSeasonComponent>modalRef.content).onModalClose
.subscribe(season => {
if (season) {
this.seasons.push(season);
this.seasonsUpdated.emit(this.sortSeasons());
this.modalCloseSubscription.unsubscribe();
}
});
}
onEditClick(season: Season) {
const modalRef = this.modalService.show(EditSeasonComponent, {
initialState: {
season,
calendarId: this.selectedCalendarId,
modalTitle: 'Edit Season'
}
});
this.modalCloseSubscription = (<EditSeasonComponent>modalRef.content).onModalClose
.subscribe(savedSeason => {
if (savedSeason) {
this.seasons.splice(this.seasons.findIndex(s => s.id === savedSeason.id), 1, savedSeason);
this.seasonsUpdated.emit(this.sortSeasons());
this.modalCloseSubscription.unsubscribe();
}
});
}
这是模态组件的代码：
export class EditSeasonComponent implements OnInit {
@ViewChild('editSeason', { read: ViewContainerRef })
public containerRef: ViewContainerRef;
seasonForm: FormGroup;
season: Season = new Season();
calendarId: number;
modalTitle = 'Add Season';
onModalClose = new EventEmitter<Season>();
months: MonthItem[];
days: number[] = this.getDays(0);
constructor(
private bsModalRef: BsModalRef,
private fb: FormBuilder,
private dialogService: DialogService,
private calendarService: CalendarService,
private notificationService: NotificationService
) { }
ngOnInit() {
this.createForm();
if (this.season.id) {
this.setValues();
}
this.months = moment.months().map((m, i) => {
return { value: i, text: m };
});
}
createForm() {
this.seasonForm = this.fb.group({
name: [null, Validators.required],
month: 0,
day: 1
});
this.seasonForm.get('month').valueChanges
.subscribe(value => {
this.days = this.getDays(value);
if (this.seasonForm.get('day').value > this.days.length) {
this.seasonForm.patchValue({ day: this.days.length });
}
});
}
getDays(month: number) {
const daysInmonth = moment().month(month).daysInMonth();
return Array.from(new Array(daysInmonth), (val, index) => {
return index + 1;
});
}
get name() { return this.seasonForm.get('name'); }
setValues() {
this.seasonForm.reset(this.season);
}
onCloseClick(dialogResult$: Observable<DialogAction | DialogCloseResult>) {
if (dialogResult$) {
dialogResult$.subscribe((result: DialogAction | DialogCloseResult) => {
if (result instanceof DialogCloseResult) {
} else if (result.primary) {
this.onSubmit();
} else {
this.onModalClose.emit(null);
this.bsModalRef.hide();
}
});
} else {
this.bsModalRef.hide();
this.onModalClose.emit(null);
}
}
onSubmit() {
if (this.seasonForm.invalid) {
touchControls(this.seasonForm);
return;
}
if (this.season.id) {
this.calendarService.updateSeason(this.calendarId, this.season.id, this.prepareSubmit())
.subscribe(season => {
this.notificationService.addMessage(NotificationType.Info, 'Season Updated Successfully');
this.onAddUpdateSeason(season);
}
);
} else {
this.calendarService.addSeason(this.calendarId, this.prepareSubmit())
.subscribe( season => {
this.notificationService.addMessage(NotificationType.Info, 'Season Added Successfully');
this.onAddUpdateSeason(season);
}
);
}
}
onAddUpdateSeason(season: Season) {
this.bsModalRef.hide();
this.onModalClose.emit(season);
}
prepareSubmit(): SaveSeason {
const formModel = this.seasonForm.value;
const saveSeason: SaveSeason = Object.assign(new SaveSeason(this.season), formModel);
saveSeason.calendarId = this.calendarId;
return saveSeason;
}
showDialog(): Observable<DialogAction | DialogCloseResult> {
const dialogRef: DialogRef = this.dialogService.open({
appendTo: this.containerRef,
title: 'Unsaved Changes',
content: 'The season has unsaved changes. Would you like to save the changes?',
actions: [
{ text: 'No' },
{ text: 'Yes', primary: true }
]
});
return dialogRef.result;
}
}
interface MonthItem {
value: number;
text: string;
}
这是模板：
<app-generic-modal [group]="seasonForm"
[title]="modalTitle"
[saveTooltip]="'Save Season'"
[dirtyDialogName]="'season'"
(closeClick)="onCloseClick($event)"
(submitForm)="onSubmit()">
<ng-template appGenericModalContent let-group>
<div class="form-row form-group">
<div class="col">
<label for="edit-season-name">Name<span class="k-required text-danger">*</span></label>
<input id="edit-season-name"
class="form-control form-control-sm"
type="text"
[formControl]="group.get('name')"
maxlength="64"/>
<div class="error-container text-danger" *ngIf="name.invalid && (name.dirty || name.touched)">
<div *ngIf="name.errors.required" class="font-weight-normal">
Name is required
</div>
</div>
</div>
</div>
<div class="form-row form-group">
<div class="col-6">
<label for="edit-season-month">Month</label>
<kendo-dropdownlist [formControl]="group.get('month')"
id="edit-season-day"
[data]="months"
textField="text"
valueField="value"
[valuePrimitive]="true"></kendo-dropdownlist>
</div>
<div class="col-6">
<label for="edit-season-day">Day</label>
<kendo-dropdownlist [formControl]="group.get('day')"
id="edit-season-day"
[data]="days"></kendo-dropdownlist>
</div>
</div>
</ng-template>
</app-generic-modal>
请告诉我如何进行此操作，几天来我一直在试图解决问题。