未捕获（承诺）：错误：无法读取未定义的属性 [英] Uncaught (in promise): Error: Cannot read property of undefined

问题描述

组件将用户从params服务

Component take user from service with params

@Component({
    selector: 'users',
    providers: [UserService],
    template: `
    <p>{{user.id}}</p>
`
})
export class UserPageComponent implements OnInit  {
    constructor(
        private userService: UserService,
        private route: ActivatedRoute
    ) {};

    ngOnInit(): void {
        this.route.params.forEach((params: Params) => {
            let id = +params['id'];
            this.userService.getUser(id)
                .then(user => {console.log(user.id);this.user = user})
        });
    }

服务：

@Injectable()
export class UserService {
    private postUrl = 'http://127.0.0.1:8000/user-detail/';  // URL to web api
    constructor(private http: Http) {
    }

    getUser(id: number): Promise<User> {

        return this.http.get(this.postUrl+id)
            .toPromise()
            .then(response => response.json() as User)
            .catch(this.handleError);

    };

我得到错误未捕获（承诺）：错误：错误。 / UserPageComponent类UserPageComponent - 内联模板：1：7导致：无法读取未定义的属性'id'

看起来好像是服务不发送承诺，虽然它应该。
如何解决这个问题？

It looks as if the service does not send the promise, although it should. How to solve this proble?

推荐答案

看起来你的组件没有用户的默认值，所以当组件渲染尝试添加默认值时未定义

It looks like your component doesn't have default value for user, so it is undefined when component rendered try adding default value

@Component({
    selector: 'users',
    providers: [UserService],
    template: `
    <p>{{user.id}}</p>
`
})
export class UserPageComponent implements OnInit  {
    user = {} // default value for user

    constructor(
        private userService: UserService,
        private route: ActivatedRoute
    ) {};

    ngOnInit(): void {
        this.route.params.forEach((params: Params) => {
            let id = +params['id'];
            this.userService.getUser(id)
                .then(user => {console.log(user.id);this.user = user})
        });
    }

实际上在这里添加一些条件逻辑会更好

actually it will be better to add some conditional logic here then

<p *ngIf="user">{{user.id}}</p>

它应该有效

这篇关于未捕获（承诺）：错误：无法读取未定义的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！