我是Angular 5的新手,能够使用subscription访问服务方法来创建视图,但是在渲染延迟方面遇到问题。用户看到第一个“未定义”字符串,并在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},
err => console.error(err),
() => this.numberOfUsers.set(this.trips[i].id, count)
);
;
}
}
getNumberOfUsers(data) {
return this.numberOfUsers.get(data.id);
}
在第一次订阅完成之后会调用initNumberOfUsers方法,这很好,但是可能在之前调用了getNumberOfUsers(data)并得到“未定义”。
这是模板中的相关部分(“数据”是ngFor循环的当前值):
<span [innerText]="getNumberOfUsers(data)"></span>
有没有一种方法可以确保在渲染之前依次完成这两种订阅方法?
更新
我能够创建一个解析器,然后conconle显示对象,但是,我很难将数据传递给组件。
相对代码:
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 },
err => console.error(err),
() => console.log(this.trips)
);
return this.trips;
}
}
从路线
resolve: {
trips: TripsResolve
}
从模块
providers: [
...
TripsResolve,
...
组件中的数据不是通过/不是avilavle:
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>
另一种方法是使用resolver,在呈现视图之前,它将准备数据。但是有时,如果数据加载花费太多时间,解析器会使屏幕空白。
@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或一些消息,以使用户知道后台发生了某些事情。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句