Question

我有这样的模板

Component.html

    <h1>aditya</h1>
    <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th style="white-space: nowrap" *ngFor="let columns of data?.display_columns; let i = index">{{columns}}</th>
          </tr>
          <tr *ngFor="let row1 of data?.row1; let i= index">
            <td style="white-space: nowrap" *ngFor="let columns of data?.display_columns; let i = index">{{row1[columns]}}</td>
          </tr>
        </thead>
      </table>
    </div>
  </div>

Component.ts

import { Component, OnInit } from '@angular/core';
import { HttpModule } from '@angular/http';
import { SpreadsheetService } from '../dataservice/spreadsheet.service';

@Component({
    moduleId: module.id,
    selector: 'sd-list-view',
    templateUrl: 'list-view.component.html',
    styleUrls: ['list-view.component.css'],
    providers: [HttpModule, ListService]

})

export class ListViewComponent implements OnInit {
    data: any;
    spreadsheet: any;
    data1: any;
    isDataAvailable: boolean = false;
    constructor(public _spreadsheetService: SpreadsheetService) {
    }
ngOnInit() {
    this._spreadsheetService.getData()
        .subscribe(data => {
            this.data = data;
            (<any>window)['mydata'] = (data);
            console.log(this.data.display_columns);
            var data1: any;
            //alert('get data');
            return this.data;
        });
    //alert('list view 2');
    }
}

模板“Aditya”的第一行显示，但循环内的数据表未加载到组件初始化。

如何在View初始化之前运行循环并加载数据，或者在View初始化之后另一种情况是加载Table数据？
PS：循环经过测试并正常工作。我不想使用APP_Initializer I have gone through this question但无法理解解决方案，因为我使用的是Observables而不是Promise。在此先感谢。

Answer 1

您可以使用

包装模板的内容

<ng-container *ngIf="data">
 template content here
</ng-container>

如果您使用的是路由器，则可以使用resolver

如果您希望在初始化AppComponent之前加载数据，则可以使用How to pass parameters rendered from backend to angular2 bootstrap method

Answer 2

由于您的数据未定义，因此会显示一些错误，例如＆＃34;无法读取未定义的数据＆＃34;。您的视图已初始化，但由于您的请求spreadsheetService.getData（）是异步请求，因此稍后会给出响应。

您可以使用支票变量：

public isLoaded=false;

在你的getData（）请求的订阅者中，使该布尔值为true：

 this._spreadsheetService.getData()
    .subscribe(data => {
        this.isLoaded=true;
        this.data = data;
    });
}

在html中：

<div *ngIf="isLoaded">
//Your content
</div>

另一种可以避免检查的方法是，最初只是将数据声明为空数组，以便在循环时不会在开始时打印任何内容。

  data: Array<any>=[];

如果要在初始化视图之前加载数据，请使用解析器。他们解决您的服务请求，并在收到回复后初始化视图。

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { MyService } from './my-service.ts';

@Injectable()
export class MyResolver implements Resolve<any> {

   constructor(private myservice: MyService) {}

  resolve(route: ActivatedRouteSnapshot) {
   return this.myservice.getData();
  }
}

将此解析程序添加到提供程序中，就像使用服务一样。并将该解析器添加到您的路线中，例如：

{
    path: 'mypath', component: MyComponent,
    resolve: {
      myData: MyResolver
    }
  },

在加载模板之前加载数据

2 个答案: