angular - Angular 4 - 从服务器检索数据后未加载 UI - 组件变量仅在单击窗口后更新

Question

我想在我的 Angular 应用程序中从服务器加载数据。我可以从服务器获取数据。加载后，UI 不会填充 html，如果我点击窗口，它会立即加载数据。

奇怪的是，它并非一直都在发生。有时 HTML 会立即加载，没有任何问题。有时不加载。

在这里我附上我的文件。

仪表板.html

<div class="dashboard-statistics">

<div fxLayout="column"
     [fxLayoutGap]="layoutGap['lt-md']" [fxLayoutGap.gt-md]="layoutGap['gt-md']">

  <div class="example-loading-shade" *ngIf="isLoadingResults">
      <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>

  <div  *ngIf="!isLoadingResults"  fxLayout="row" fxLayout.lt-md="column"
       fxLayoutAlign="start start" fxLayout.lt-md="start stretch"
       [fxLayoutGap]="layoutGap['gt-md']" [fxLayoutGap.lt-md]="layoutGap['lt-md']"
       [fxFlex]="flexWidth['lt-sm']">

    <div fxLayout="row"
         fxLayoutAlign="start start" fxLayoutAlign.lt-md="start stretch"
         [fxLayoutGap]="layoutGap['gt-md']" [fxLayoutGap.lt-md]="layoutGap['lt-md']"
         [fxFlex]="flexWidth['gt-md']" [fxFlex.lt-md]="flexWidth['lt-sm']" [fxFlex.gt-sm]="flexWidth['gt-sm']" [fxFlex.gt-md]="flexWidth['gt-md']">
      <div class="widget" fxFlex="auto" fxFlex.gt-xs>
        <vr-state-widget property="Fee Due Today" value="{{ data.studentFeeDueToday }}" icon=""

                         backgroundColor="linear-gradient(60deg, #8C99E0, #6572B8)" textColor="white"></vr-state-widget>
      </div>

      <div class="widget" fxFlex="auto" fxFlex.gt-xs>
        <vr-state-widget property="Fee Due Students" value="{{ data.studentFeeDue }}" icon=""
                         backgroundColor="linear-gradient(60deg, #4DD0E2, #4CA8BA)" textColor="white"></vr-state-widget>
      </div>
    </div>
  </div>
</div>

仪表板.component.ts

import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import { ROUTE_TRANSITION } from '../../app.animation';
import * as fromRoot from '../../reducers/index';
import { Store } from '@ngrx/store';
import { BadInput } from '../../common/bad-input';
import { NotFoundError } from '../../common/not-found-error';
import { AppError } from '../../common/app-error';


import { DataService } from '../../services/data.service';


@Component({
   selector: 'vr-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
   animations: [...ROUTE_TRANSITION],
   host: { '[@routeTransition]': '' }
})
export class DashboardStatisticsComponent implements OnInit {

isLoadingResults: boolean;


constructor(
  private store: Store<fromRoot.State>,
  private service: DataService,
  private cd: ChangeDetectorRef
) { }

ngOnInit() {

this.isLoadingResults = true;
this.service.getAll('/dashboard').subscribe(data => {
  this.data = data;
  this.isLoadingResults = false;
}); 
}
}

数据服务.ts

  import { BadInput } from './../common/bad-input';
  import { NotFoundError } from './../common/not-found-error';
  import { AppError } from './../common/app-error';
  import { Http, RequestOptions , Headers } from '@angular/http';
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/observable/throw';
  import { environment } from '../../environments/environment';
  import { ToastrService } from 'ngx-toastr';

  @Injectable()
  export class DataService {

    options: object;

    constructor( private http: Http , private toastr: ToastrService ) { 
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('Authorization', 'Bearer '+localStorage.getItem('token'));
      this.options = new RequestOptions({ headers: headers });

    }

    getAll(url: string) {
      return this.http.get(environment.apiEndPoint+url,this.options)
        .map(response => response.json())
        .catch(this.handleError);
    }

    get(url: string) {
      return this.http.get(environment.apiEndPoint+url,this.options)
        .map(response => response.json())
        .catch(this.handleError);
    }

    create(url: string,resource) {
      return this.http.post(environment.apiEndPoint+url, JSON.stringify(resource),this.options)
        .map(response => {
           this.toastr.success( 'Data Saved Successfully');
           return response.json(); 
         })
        .catch(this.handleError);
    }

    update(url: string,resource) {
      return this.http.patch(environment.apiEndPoint+url , JSON.stringify(resource),this.options)
        .map(response => {
           this.toastr.success( 'Data Updated Successfully');
           return response.json(); 
         })      
        .catch(this.handleError);
    }

    delete(url: string,id) {
      return this.http.delete(environment.apiEndPoint+url,this.options)
        .map(response => {
           this.toastr.success( 'Data Deleted Successfully');
           return response.json(); 
         })      
        .catch(this.handleError);
    }

    private handleError(error: Response) {
      if (error.status === 403){
        //this.toastr.error( 'User Login Failed');
        return Observable.throw(new BadInput(error.json()));
      }
      if (error.status === 500){
        //this.toastr.error( 'Internal Server Error');
        return Observable.throw(new BadInput(error.json()));
      }
      if (error.status === 422){
        //this.toastr.error( 'Validation Failed');
        return Observable.throw(new BadInput(error.json()));
      }

      if (error.status === 404){
        //this.toastr.error( 'Not found');
        return Observable.throw(new NotFoundError(error.json()));
      }

      //this.toastr.error( 'Something went wrong. Please contact Administrator!');
      return Observable.throw(new AppError(error.json()));
    }
  }

我没有低估可能是什么问题。我可以看到所有代码都在毫无问题地执行。但有时（不是所有时间）模板不会更新组件变量更改，并且加载它需要更多时间，它会继续加载。如果我在任何地方单击窗口，则立即加载数据

http://edsee.wims.pro - 这是 URL - Credentials- admin/123456 - 密码.. 这个问题在所有模块中

请帮我找到路线原因。提前致谢。另外请告诉我组件强制变量更改也立即反映在模板中。我希望我的变量不会立即刷新。正因为如此，它才会继续显示加载。一旦我在 UI 中单击，它就会触发变量更改并立即加载数据。

标签： angular