Question

我的API返回数据的速度很慢，需要几秒钟。我的页面加载为空白，几秒钟后我可以在控制台上看到api响应，但是我的页面没有自动获取数据。如果我检查并关闭检查窗口，则可以在屏幕上看到数据。我无法找出原因。

有没有办法延迟页面加载，直到API返回响应，或者一旦组件获取响应页面将自动获取数据。

使用角度6

import { Observable, fromEventPattern } from 'rxjs';
import { HttpClient } from '@angular/common/http';

app.component.ts。从API提取响应

getData(){
    this.http.get(URL)
     .subscribe((response) => {
      this.gdata = response;

    })
  }

app.component.html看起来像这样。

<div  class="row" *ngFor="let data of (gdata | groupBy:'Sport' )">

以下未使用service.ts ..的完整组件

import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, fromEventPattern } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Pipe, PipeTransform } from '@angular/core';




@Component({
  selector: 'm-sport-profile',
  templateUrl: './sport-profile.component.html',
  styleUrls: ['./sport-profile.component.scss']
})
export class sportProfileComponent implements OnInit {

  private Id : any;
  private gData = [];

  private URL = 'http://localhost:65210/api/sports/';  // URL to web api
  private URL2 : string;  

  constructor(    private http: HttpClient, private route: ActivatedRoute) { }

  ngOnInit() {

    this.route.queryParams.subscribe(params => {
      this.Id = params['Id']; //get specific query param
  })

    this.URL2 = this.URL+this.Id;
    this.getsportDetail();

  }


  getsportDetail(){
    this.http.get(this.URL2)
      .subscribe((response) => {
      this.gData = response;      
    })
  }



}

下面是PIPE

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array<any>, property: string): Array<any> {
        if(!collection) {
            return null;
        }
        const groupedCollection = collection.reduce((previous, current)=> {
            if(!previous[current[property]]) {
                previous[current[property]] = [current];
            } else {
                previous[current[property]].push(current);
            }
            return previous;
        }, {});
        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
      }

}

Answer 1

import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, fromEventPattern } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Pipe, PipeTransform } from '@angular/core';




@Component({
selector: 'm-sport-profile',
templateUrl: './sport-profile.component.html',
styleUrls: ['./sport-profile.component.scss']
})
export class sportProfileComponent implements OnInit {

private Id: any;
private gData = [];

private URL = 'http://localhost:65210/api/sports/';  // URL to web api
private URL2: string;

constructor(private http: HttpClient, private route: ActivatedRoute) {
}

ngOnInit() {

    this.route.queryParams.subscribe(params => {
        this.Id = params['Id']; //get specific query param
        this.URL2 = this.URL + this.Id;
        this.getsportDetail();
    })
}


getsportDetail() {
    this.http.get(this.URL2)
        .subscribe((response) => {
            this.gData = response;
        })
}



}

希望这行得通。因为只有在第一个函数获得值并在第二个函数中使用该值时，才能执行第二个函数。

您可以尝试的一件事是使用ngOnChanges()。

有关更多详细信息，请参阅documentation。

已经有很多问题可以解释动态加载。请检查一下。

Answer 2

尝试使用类似的东西

<div class="row" *ngFor="let data of ((gdata | async) | groupBy:'Sport')">

，看看是否适合您。异步管道用于等待根据promise或observable设置内容。我可以看到GroupBy管道可能会导致渲染块，因为它希望在ngViewInit上设置gdata。您也可以尝试将订阅移至构造函数，即

constructor(private http: HttpClient, private route: ActivatedRoute) {
   this.http.get(URL).subscribe((response) => {
      this.gdata = response;
   })  
}

为确保在生命周期中尽早将请求排队。让我知道它是否有效。

延迟API回应，页面空白

2 个答案: