angular - 在从服务中检索到所有数据之前不要加载页面

Question

我试图在 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>

Answer 1

Angular2 提供了你可以使用的 AsyncPipe。正如文档所说:

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

阅读文档 here .

或者 - 您可以使用标志。所有数据已获取。使用 *ngIf 将其与您的 HTML 绑定(bind):

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

在组件中。您可以将此 bool 变量初始化为 false。加载所有数据后，您可以将其设置为 true。

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