मैं एक आरामदायक सेवा से प्राप्त प्रतिक्रिया के आधार पर एक कैलेंडर पॉप्युलेट करने की कोशिश कर रहा हूं (वर्तमान में तिथियों की एक सूची लौटा रहा है)।

मैं घटक की ngInit() विधि से आराम से सेवा विधि बुला रहा हूँ।

 ngOnInit() {
    this.refreshCalendar(); 

    for (var calendarEntryShortvar of this.calendarEntriesShort) {
      console.log("cal entry short from ngInit: " + calendarEntryShortvar.start);
    }

  }

सामग्री को मुद्रित करने के लिए उपरोक्त लूप अपरिभाषित लंबाई के कारण विफल हो जाता है।

इसके लिए कोड यहां दिया गया है। रीफ्रेश कैलेंडर ();

 refreshCalendar(){
    this.calendarService.retrieveAllCalendarEntriesShort('test')
    .subscribe (
      response => {
        console.log("printing response")
        console.log(response)
        this.calendarEntriesShort = response; 

        for (var calendarEntryShortvar of this.calendarEntriesShort) {
          console.log("cal entry short: " + calendarEntryShortvar.start);
          this.calendarEntry =  new CalendarEntry(calendarEntryShortvar.start, calendarEntryShortvar.start, 
          'title event 1', this.colors.redx, this.actions);
          console.log("pushing calendar entry")
          this.events.push(this.calendarEntry);     
        }

       }
    )

  }

उपरोक्त कोड सरणी की सामग्री को सफलतापूर्वक प्रिंट करता है, जिसका अर्थ है कि यह सेवा से प्रतिक्रिया प्राप्त करने के बाद निष्पादित हो रहा है।

यहाँ सेवा कॉल के लिए कोड है:

पुनः प्राप्त करेंAllCalendarEntriesShort (उपयोगकर्ता नाम) {

console.log("retrieveAllCalendarEntries"); 

return this.http.get<CalendarEntryShort[]>(`${CALENDER_API_URL}/users/${username}/calendarentries`);

}

कहने की जरूरत नहीं है, कैलेंडर दिनांक सरणी पॉप्युलेट होने से पहले कैलेंडर का HTML प्रस्तुत किया जा रहा है। यहाँ HTML घटक है:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<angular-calendar-year-view  [events]="events"  [viewDate]="viewDate" [customTemplate]="Customtemplate" ></angular-calendar-year-view>
<ng-template #Customtemplate>
        My custom templatex
</ng-template>
<angular-calendar-year-view  
       [themecolor]="themecolor" 
       [events]="events"  
       [viewDate]="viewDate"  
       [nothingToshowText]="nothingToshowText"
       (eventClicked)="eventClicked($event)" 
       (actionClicked)="actionClicked($event)" >
</angular-calendar-year-view>

प्रतिक्रिया प्राप्त होने तक किसी भी तरह मुझे कोणीय को रोकने की आवश्यकता है। क्या यह सिर्फ एक सिंक्रोनस कॉल करने का सवाल है? मुझे यकीन नहीं है कि यह क्यों काम नहीं कर रहा है।

1
Jack BeNimble 20 जून 2019, 22:52

2 जवाब

सबसे बढ़िया उत्तर

कोणीय में एसिंक्रोनस कॉल को संभालने के कई तरीके हैं। मेरा पहला विकल्प आम तौर पर जब भी संभव हो एसिंक पाइप का उपयोग करना है (इसलिए सदस्यता समाप्त करने के बारे में चिंता करने की कोई आवश्यकता नहीं है)। ऐसा कुछ आपके लिए काम करना चाहिए:

इसके बजाय नमूदार पर एक नक्शा करने के लिए अपनी एपीआई सेवा कॉल को अपडेट करें और इसके लिए एक चर जोड़ें:

calendarResults$: Observable<CalendarEntry[]>;

refreshCalendar() {
  this.calendarResults$ = this.calendarService.retrieveAllCalendarEntriesShort('test')
      .pipe(map((response: any[]) => {
        return response.map(calendarEntryShortvar => {
          return new CalendarEntry(calendarEntryShortvar.start, calendarEntryShortvar.start, 'title event 1', this.colors.redx, this.actions)
        });
      }));
}

तब आप async पाइप का उपयोग *ngIf अपने टेम्पलेट में कर सकते हैं (कुछ लोडिंग एनीमेशन प्रदर्शित करने में सक्षम होने के बोनस के साथ):

<ng-container *ngIf="calendarResults$ | async as calendarResults; else loading"
    <angular-calendar-year-view  [events]="calendarResults"  [viewDate]="viewDate" [customTemplate]="Customtemplate" ></angular-calendar-year-view>
    // your other code dependent on this async data
</ng-container>
<ng-template #loading>
    Loading...
</ng-template
1
Freddy 21 जून 2019, 01:53

इससे निपटने से पहले आपको प्रतिक्रिया की प्रतीक्षा करनी होगी। साथ ही, आप html भाग को जोड़ने से पहले इसके लिए प्रतीक्षा कर सकते हैं जो इसके साथ दृश्य में डील करता है।

एपीआई कॉल को एक सेवा में रखें, यह सबसे अच्छी प्रथा है:

आपकी सेवा में

// service.ts
refreshCalendar() {
    return this.calendarService.retrieveAllCalendarEntriesShort('test');
}

आपके घटक में:

events: any = [];

constructor(private service: Service) {}

ngOnInit() {
    this.service.refreshCalendar()
    .subscribe(response => {
        this.calendarEntriesShort = response;
        for (var calendarEntryShortvar of this.calendarEntriesShort) {
          console.log("cal entry short from ngInit: " + calendarEntryShortvar.start);
          for (var calendarEntryShortvar of this.calendarEntriesShort) {
              this.calendarEntry =  new CalendarEntry(calendarEntryShortvar.start, 
             calendarEntryShortvar.start, 
             'title event 1', this.colors.redx, this.actions);
             this.events.push(this.calendarEntry);     
           }
        }
    });
}

और आपके विचार में

<div *ngIf="events.length > 0">
    <angular-calendar-year-view  [events]="events"  [viewDate]="viewDate" 
    [customTemplate]="Customtemplate" >
    </angular-calendar-year-view>
    <ng-template #Customtemplate>
        My custom templatex
    </ng-template>
    <angular-calendar-year-view  
        [themecolor]="themecolor" 
        [events]="events"  
        [viewDate]="viewDate"  
        [nothingToshowText]="nothingToshowText"
        (eventClicked)="eventClicked($event)" 
        (actionClicked)="actionClicked($event)" >
    </angular-calendar-year-view>
</div>
0
Amadou Beye 21 जून 2019, 02:59