我尝试在我进行预订(按下按钮时创建)后使屏幕更新预订,但按下按钮后似乎无法使其更新
new-reservation-component.html
<button (click)="onButtonClick()" mat-raised-button class="btn btn-primary" >Create</button>
new-reservation-component.ts
private scheduleComponent: ScheduleComponent
onButtonClick() {
this.scheduleComponent.ngOnInit()
//also tried calling the other functions by making them public like fetchReservation
}
计划组件.ts
import {
Component,
OnDestroy,
OnInit
} from '@angular/core';
import {Reservation} from "../../reservation.model";
import {ReservationsHttpService} from "../../reservations-http.service";
import {Subscription} from "rxjs";
import {HttpClient} from "@angular/common/http";
@Component({
selector: 'app-schedule',
templateUrl: './schedule.component.html',
styleUrls: ['./schedule.component.scss']
})
export class ScheduleComponent implements OnInit, OnDestroy {
isFetching = false;
error: any = null
private errorSub: Subscription;
reservations: Reservation[] = [];
weekYear_ReservationMap: Map<string, Reservation[]> = new Map<string, Reservation[]>();
constructor(private http: HttpClient, private reservationHttpService: ReservationsHttpService) {
}
ngOnInit(): void {
this.errorSub = this.reservationHttpService.error.subscribe(errorMessage => {
this.error = errorMessage;
});
this.fetchReservations();
}
ngOnDestroy() {
this.errorSub.unsubscribe();
}
private mapReservationsToWeekYear(): Map<string, Reservation[]> {
let reservationMap = new Map<string, Reservation[]>();
for (let reservation of this.reservations.sort((a, b) => a.date > b.date ? 1 : -1)) {
let isWeekOfNextYear = ( reservation.date.getMonth() + 1 == 12
&& reservation.getWeekNumber() == 1); // To group according to ISO 8601.
// curMonthYearKey is also the header displayed in the template.
let curMonthYearKey = (reservation.date.getFullYear() + (isWeekOfNextYear ? 1 : 0)) + " - Week: " + reservation.getWeekNumber();
let curMonthYearArray = reservationMap.get(curMonthYearKey) || [];
curMonthYearArray.push(reservation);
reservationMap.set(curMonthYearKey, curMonthYearArray || []);
}
return reservationMap;
}
private fetchReservations(){
this.isFetching = true;
this.reservationHttpService.fetchOpenReservations()
.subscribe((reservations) => {
this.reservations = reservations;
this.weekYear_ReservationMap = this.mapReservationsToWeekYear();
this.isFetching = false;
}, (error) => {
this.error = error;
this.isFetching = false;
}
)
}
}
我试着创建一个属性来使用schedule component.ts的函数,但它不起作用,我还试着将OnInit更改为DoCheck、OnChanges、OnViewChanges等,但效果不佳(或者确实起作用,但发送了太多请求,导致我的网站崩溃,就像我尝试DoCheck或AfterContentChecked时一样)
我还尝试了@ViewChild(调度组件)调度组件:调度组件;然后执行以下操作。scheduleComponent.ngOnInit()但这也不起作用
我尝试使用schedule.ts、ngOnDestroy、fetchReservation和OnInit中的函数,但没有成功
1条答案
按热度按时间gijlo24d1#
为什么不在单击按钮时调用
fetchReservations
呢?