不要加载页面，直到所有数据都从服务中检索

我想在Angular中向浏览器显示一个简单的数据，但是一旦所有数据都从服务中检索，我想显示数据。不要加载页面，直到所有数据都从服务中检索

如何做到这一点？

目前即使没有完成获取我的数据，页面也会显示。

下面是示例代码

In test.component.ts file 

ngOnInit() { 
    this._service.getQuestions().subscribe(data => { this.questionCollection = data }); 
}

在我的服务

getQuestions() { 
    return this._http.get('assets/questions.json') 
     .map(res => res.json()) 
     .catch(this.handleError); 
}

.html文件

<div> Other text here...... </div> 
<div *ngFor="let col of questionCollection"> 
    <button type="button" class="btn btn-default">{{col.Text}}</button> 
</div>

来源

2016-11-25 wal

你想要发生什么？要加载的路线，要显示的加载指标，还是列表不显示？显示更多组件代码也可能有所帮助 – Fiddles

如果要在导出数据之前阻止导航，可以使用auth警卫返回可观察值。 – 2017-05-24 05:07:04

Angular2提供AsyncPipe，您可以使用。正如医生说：

异步管道订阅可观察或承诺，并返回它发出的最新值。当发出新值时，异步管道将标记要检查更改的组件。当组件被破坏时，异步管道会自动取消订阅，以避免潜在的内存泄漏。

阅读文档here。

或 - 您可以使用一个标志。 allDataFetched。使用* ngIf将其绑定到您的HTML：

<div *ngFor="let col of questionCollection" *ngIf="allDataFetched"> 
    <button type="button" class="btn btn-default">{{col.Text}}</button> 
</div>

In component。您可以将此布尔变量初始化为false。当所有数据加载完毕后，您可以将其设置为true。

//component file 
    allDataFetched: boolean = false; 
    ngOnInit() { 
     this._service.getQuestions().subscribe(data => { 
      this.questionCollection = data; 
      this.allDataFetched = true; }); 
    }

来源

2016-11-25 06:52:17

我不认为你可以在同一个元素上使用'* ngFor'和'* ngIf'。为什么你需要一个单独的'allDataFetched'属性，当你可以看看'questionCollection'是否有一个值来知道订阅数据是否已经进入？ – 2017-05-24 05:08:43

一个简单的方法是使用*ngIf

<ng-container *ngIf="questionCollection"> 
    <div> Other text here...... </div> 
    <div *ngFor="let col of questionCollection"> 
    <button type="button" class="btn btn-default">{{col.Text}}</button> 
    </div> 
</ng-container>

来源

2016-11-25 07:27:52

角度提供了一个resolver。如果你想整个组件都要等到数据，你应该使用resolve。如果您希望组件中的某些数据区在数据之前不显示，只需使用ngIf即可如上进行控制。

来源

2017-05-24 04:45:21 Mavlarn

不要加载页面，直到所有数据都从服务中检索

回答

相关问题