以角度 5 等待 Http 响应

debugcn 发表于 Dev

巴文

我正在研究 Angular-calendar。我想在 Angular-5 中加载组件之前等待 HTTP 响应。

日历 component.ts :-

我想显示来自服务的数据this.totallist，

  events: CalendarEvent[] =  this.totallist; // I have show data here which is fetched from database.

  ngOnInit() {
       this.eventlist.getEvents().subscribe(
         data => {
             console.log(data);
             let MyObj = JSON.parse(data);
             let event_data_1 = [];
             let outage_list = MyObj.outageList;
             console.log(outage_list);
              let startdate = outage_list[0].actualStartDateTime;
              let enddate = outage_list[0].actualStartEndTime;                      
              // console.log(startdate);
              let converted_startdate = this.cleanDate('/Date('+startdate+')/'); 
              let converted_enddate = this.cleanDate('/Date('+enddate+')/');                       
              console.log(converted_startdate);
              console.log(converted_enddate);
              for(let i=0;i<1;i++)
              {
                  let sub_object = {
                      start: new Date(),
                      end: new Date(),
                      title: 'A 3 day event',
                      color: colors.red,
                      actions: this.actions
                  }
                  event_data_1.push(sub_object);
              }
              this.totallist = event_data_1;
              console.log(this.totallist);
              return this.totallist;
         }
        );
       // this.column_data = column_data;
  }

service.ts :-

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient, HttpHeaders } from '@angular/common/http';


@Injectable()
export class ApiNewsResolver {

    getEvents(): Observable<any>{
          return this.http.get('http://localhost:8080/MacromWeb/ws/Calendar').map(data => data['_body']);

    }
  constructor(private http: Http) { 

  }
}

现在我想先加载 API 服务，然后再加载组件。我怎样才能在 Angular-5 中完成这个任务？

如果有任何需要，我可以显示我的整个组件代码。

梅尔基亚

只需将您的数据存储在订阅中：

events: CalendarEvent[]; // I have show data here which is fetched from database.

  ngOnInit() {
       this.eventlist.getEvents().subscribe(
         data => {
             console.log(data);
             let MyObj = JSON.parse(data);
             let event_data_1 = [];
             let outage_list = MyObj.outageList;
             console.log(outage_list);
              let startdate = outage_list[0].actualStartDateTime;
              let enddate = outage_list[0].actualStartEndTime;                      
              // console.log(startdate);
              let converted_startdate = this.cleanDate('/Date('+startdate+')/'); 
              let converted_enddate = this.cleanDate('/Date('+enddate+')/');                       
              console.log(converted_startdate);
              console.log(converted_enddate);
              for(let i=0;i<1;i++)
              {
                  let sub_object = {
                      start: new Date(),
                      end: new Date(),
                      title: 'A 3 day event',
                      color: colors.red,
                      actions: this.actions
                  }
                  event_data_1.push(sub_object);
              } 
              this.events =  event_data_1; 
         }
        );
       // this.column_data = column_data;
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。