Question

在我的有角度的应用程序中，我有一个父组件，即仪表板组件，具有2个子组件，即Analytics组件和Stats组件。我的dashboard.component.html看起来像这样

<div class="row">
  <div class="col-lg-6"><app-analytics></app-analytics></div>
  <div class="col-lg-6"><app-stats></app-stats></div>
</div>

我还在使用全局组件，所有组件都可以使用全局组件，就像全局存储一样。现在在dashboard.component.ts中。我正在对服务器进行HTTP调用，获取数据并将其保存到Global组件中。

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Global } from 'app/shared/global';
import { Http } from '@angular/http';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

 constructor(private http : Http){
 };

 ngOnInit(){
  this.http.get('/api/getUserPreferences').subscribe(response=>{
   var data = response.json();
   Global.userPreferences = data.preferences;
  })
}

我在子组件（即Google Analytics（分析）组件和统计信息组件）中使用的用户首选项。

analytics.component.ts

import { Component, OnInit } from '@angular/core';
import { Global } from 'app/shared/global';
import { Http } from '@angular/http';

@Component({
  selector: 'app-analytics',
  templateUrl: './analytics.component.html',
  styleUrls: ['./analytics.component.css']
})
export class AnalyticsComponent implements OnInit {

 public analyticsUserPreferences : any;

 constructor(private http : Http){
 };

 ngOnInit(){
   this.analyticsUserPreferences  = Global.userPreferences.analytics;
   // Printing just for the question purpose
   console.log(this.analyticsUserPreferences);
 }
}

stats.component.ts

import { Component, OnInit } from '@angular/core';
import { Global } from 'app/shared/global';
import { Http } from '@angular/http';

@Component({
  selector: 'app-stats',
  templateUrl: './stats.component.html',
  styleUrls: ['./stats.component.css']
})
export class StatsComponent implements OnInit {

 public statsUserPreferences : any;

 constructor(private http : Http){
 };

 ngOnInit(){
   this.statsUserPreferences  = Global.userPreferences.stats;
   // Printing just for the question purpose
   console.log(this.statsUserPreferences);
 }
}

现在，在这些子组件中。每次在控制台中，我都会得到undefined。有什么方法可以等待Global.userPreferences不包含值。还是有其他方法可以做到这一点。我只希望它应该等到http请求完成并在值存储在Global.userPreferences中时打印。

Answer 1

您可以使用异步管道和* ngIf来等待http请求完成，然后再呈现子组件。然后使用绑定将数据向下传递到子组件，并通过@Input（）接收它。

dashboard.component.ts

>>> from pyspark.sql.types import *
>>> fulldataframe = [StructField("FIELDNAME_1",StringType(), True),StructField("FIELDNAME_2", StringType(), True),StructField("FIELDNAME_3", StringType(), True)]
>>> schema = StructType([])
>>>
>>> dataframeempty = sqlContext.createDataFrame(sc.emptyRDD(), schema)
>>> resultunion = sqlContext.createDataFrame(sc.emptyRDD(), schema)
>>> if (fulldataframe.isEmpty()):
...     resultunion = dataframeempty
... elif (dataframeempty.isEmpty()):
...     resultunion = fulldataframe
... else:
...     resultunion=fulldataframe.union(dataframeempty)
...


Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
AttributeError: 'list' object has no attribute 'isEmpty'
>>>

dashboard.html

public userPreferences$: Observable<any>;

ngOnInit(){
  this.userPreferences$ = this.http.get('/api/getUserPreferences').subscribe();
  })

等待直到请求完成成角度

1 个答案: