我是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;
}
});
}
}
所以你现在有两个选择.
