キャッチされない（約束で）：エラー：未定義

Question

のプロパティを読み取ることができませんコンポーネントの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); 

    }; 

そして、私はエラーUncaught (in promise): Error: Error in ./UserPageComponent class UserPageComponent - inline template:1:7 caused by: Cannot read property 'id' of undefined

を得るに見えますサービスが約束を送っていないかのように、それはすべきです。 これを解決するにはどうすればよいですか？

Answer 1

あなたのコンポーネントがユーザーのデフォルト値を持っているdosn'tように見えますので、コンポーネントは、実際にはその後、ここ

を、いくつかの条件付きロジックを追加する方がよいでしょうデフォルト値

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