在Angular 5中等待渲染视图之前的数据

发布时间：2020-12-17 17:24:03 所属栏目：安全来源：网络整理

导读：我是Angular 5的新手,能够创建使用订阅访问服务方法的视图,但在渲染中遇到延迟问题.用户看到第一个“未定义”字符串,0.5秒后它变为正确的值. 这是组件的.ts文件： public trips: Trip[]; public numberOfUsers : Mapstring,number = new Mapstring,number();

我是Angular 5的新手,能够创建使用订阅访问服务方法的视图,但在渲染中遇到延迟问题.用户看到第一个“未定义”字符串,0.5秒后它变为正确的值.

这是组件的.ts文件：

public trips: Trip[];
  public numberOfUsers : Map<string,number> = new Map<string,number>();

  constructor(private tripService: TripService) { }

  ngOnInit() {
   this.getTrips();
  }

  getTrips() {
    this.tripService.getTripForMe().subscribe(
      data => { this.trips = data;},err => console.error(err),() => this.initNumberOfUsers()
    );
  }

  initNumberOfUsers() {
    for (let i = 0; i < this.trips.length; i++) {
      let count;
      this.tripService.getNumberOfUsers().subscribe(
        data => { count = data},() => this.numberOfUsers.set(this.trips[i].id,count)
      );


      ;
    }
  }

  getNumberOfUsers(data) {
    return this.numberOfUsers.get(data.id);
  }

方法initNumberOfUsers在第一次订阅完成后调用,这是好的,但getNumberOfUsers(数据)可能在之前调用并获得“undefined”.

以下是模板的相关部分(“data”是ngFor循环的当前值)：

<span [innerText]="getNumberOfUsers(data)"></span>

有没有办法确保两个订阅方法在呈现之前按顺序完成？

UPDATE

我能够创建一个解析器,而concole显示对象但是,我很难将数据传递给组件.

解析器代码：

import { Injectable } from '@angular/core';
import { Router,Resolve,ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
import { Trip} from ....
import { TripService } from .....
import { Observable } from 'rxjs/Rx';

@Injectable()
export class TripsResolve implements Resolve<Trip[]> {

   public trips: Trip[];

   constructor(private service: TripService) {}

   resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot) {
     this.service.getTrips().subscribe(
        data => { this.trips = data },() => console.log(this.trips)
      );
      return this.trips;
   }
}

从路线

resolve: {
         trips: TripsResolve
      }

来自模块

providers: [
        ...
        TripsResolve,...

组件中的数据不通过/不可用：

import { Component,OnInit } from '@angular/core';
import { Trip } from ...
import { Router,ActivatedRoute } from '@angular/router';

@Component({
  selector: ...
  templateUrl: ...
  styleUrls: ...
})
export class MyComponent implements OnInit {

    public trips: Trip[];

    constructor(private route: ActivatedRoute,private router: Router) {
    }

    ngOnInit() {
        this.route.data.forEach(data => {
            this.trips = data.trips;
            console.log(this.trips);  //can't see it
       });

    } 
}

知道如何访问/检索组件中的数据？

解决方法

当我通过API调用处理数据时,我遇到了类似的问题

我尝试了两种解决方案

一个是使用* ngIf

只有在数据准备就绪时,DOM才会填充.

<div *ngIf="isLoaded">Text to show</div>

另一个是使用解析器,在呈现视图本身之前它将准备数据.但是,如果数据加载花费太多时间,有时解析器会将屏幕保持为空白.

@Injectable()
export class HeroDetailResolve implements Resolve {
    constructor(private heroService: HeroService,private router: Router) { }

    resolve(route: ActivatedRouteSnapshot): Promise | boolean {
        let id = +route.params['id'];
        return this.heroService.getHero(id).then(hero => {
            if (hero) {
                return hero;
            } else { // id not found
                this.router.navigate(['/dashboard']);
                return false;
            }
        });
    }
}

所以你现在有两个选择.

我推荐* ngIf.在加载数据的过程中,显示??一些加载器gif或一些消息,让用户知道后台发生的事情.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!