angular2怎么确保渲染模板时已经取到异步数据呢？

Question

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: [
        './home.component.scss'
    ]
})
export class HomeComponent implements OnInit{
    userInfo;
    
    constructor(private userService : UserService){

    }

    ngOnInit(){
        this.userService.getUser().then(userInfo => {
            console.info('登录用户信息：', userInfo);
            this.userInfo = userInfo;
        });
    }
}

userInfo返回的是{xzqh: '350524'}，但是渲染模板的时候会报userInfo is undefined，我怎么确保组件渲染时已经取到异步数据userInfo呢？

Answer 1

1. 加一个loading的状态，之后在模板里*ngIf这个状态。

2. 在模板里使用userInfo?.name形式。

Answer 2

你这个需要给 userinfo一个初始值的。
直接生命的时候 userinfo＝{}

Answer 3

Angular在发生异步操作时就会开始渲染模板。
可以有2个方向进行修改。
一是在发生异步操作时通知NG不要渲染有问题的代码，可以使用ngIf
二是不要在ngOnInit中进行异步操作，把异步操作提取到路由的resolve中。
我之前参与开发过大型的Angular应用，发现是否在ngOnInit中进行异步操作会导致开发难度增加，并且画面表现也不一致。
为了降低开发人员的开发难度，建议把数据提取到resolve中。
在ngOnInit结束前进行异步操作会导致很多隐藏的bug，比如window.load触发的时机也不一致，这对于大型应用就是灾难。