未捕获的（在承诺）：错误：无法读取未定义

Question

组件的财产采取用户从服务中使用参数

@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); 

    }; 

而且我得到错误Uncaught (in promise): Error: Error in ./UserPageComponent class UserPageComponent - inline template:1:7 caused by: Cannot read property 'id' of undefined

它看起来就好像该服务没有发送承诺，尽管它应该。 如何解决这个问题？

Answer 1

它看起来像你的组件不到风度有用户默认值，所以当组件渲染尝试添加默认值

@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}) 
     }); 
    } 

实际上这将是更好地在这里加入一些条件逻辑则

它是未定义

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

它应该工作