等待角度 5 中的 Http 响应答案

【问题标题】：Wait for Http response in angular 5等待角度 5 中的 Http 响应
【发布时间】：2018-06-19 12:19:28
【问题描述】：

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

日历组件.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 中完成这项任务？

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

【问题讨论】：

因为你的组件是在数据存在之前加载的？
@Pterrat。是的。那么，我该如何等待呢？所以，当数据可用时，我可以在events: CalendarEvent[] = this.totallist; 中显示它
*ngIf 在您的组件上工作吗？（进入模板）
@Pterrat。我得到了我的答案。非常感谢您宝贵的时间:)

标签： javascript angular typescript rxjs angular5

【解决方案1】：

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

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;
  }

【讨论】：

完美。非常感谢。我从5个小时就开始尝试了。 :)

【解决方案2】：

您的组件必须被加载，但您可以使用 *ngIf 指令加载和卸载 HTML 部分。只需检查您的数组是否为空。更多关于 here.

另外，你可能想看看 Angular 拦截器

【讨论】：