2017-10-23 6 views
1

이온 2에 매우 문제가 있습니다. JSON 개체를 얻고 있는데이 개체 데이터가 코드 <span>{{ user|json }}</span>을 사용하여 있는지 확인할 수 있습니다. '<span>{{ user.id }}</span> 코드를 사용하면 "속성 ID가 null 일 수 없습니다"라는 메시지와 함께 예외가 표시됩니다. this.userService.get(this.user_id) 메서드는 다른 섹션에서 사용되며 잘 작동하지만이 섹션에서는 그렇지 않습니다. 어떻게 도와 줄 수 있습니까?JSON 개체가 존재하지만 속성을 선택하면 이온 2에서 undefined를 반환합니다.

이 내 코드입니다 :


          
  
<!-- my profile.html view --> 
 
    <ion-row> 
 
       <ion-col col-4> 
 
       Tipo de socio 
 
       </ion-col> 
 
       <ion-col col-8> 
 
       <span>{{ user.id }}</span><!-- cannot read id property of a null --> 
 
       </ion-col> 
 
      </ion-row> 
 
      <ion-row> 
 
       <ion-col col-4> 
 
       Tipo de socio 
 
       </ion-col> 
 
       <ion-col col-8> 
 
       <span>{{ user|json }}</span><!-- the data is returned --> 
 
       </ion-col> 
 
      </ion-row>
// My profile.ts (where I'm loading the view and calling the user services) 
 

 
    import { User, UserService } from '../../app/models/user'; 
 
    @Component({ 
 
     selector: 'page-profile', 
 
     templateUrl: 'profile.html' 
 
    }) 
 
    export class ProfilePage { 
 
     title = 'My Profile'; 
 
     user: User = null; 
 
     private user_id: number = 0; 
 
     constructor(
 
     public navCtrl: NavController, 
 
     public navParams: NavParams, 
 
     public alertCtrl: AlertController, 
 
     public modalCtrl: ModalController, 
 
     public loadingCtrl: LoadingController, 
 
     public userService: UserService) { 
 
     this.user_id = this.navParams.get('user_id'); // this value is working fine! 
 
     if (this.user_id > 0) { 
 
      this.userService.get(this.user_id).then(user => this.user = user); 
 
     } 
 
     } 
 
     ionViewDidLoad() { } 
 
    }
// My user.ts (where I've my services) 
 

 
    @Injectable() 
 
    export class User { 
 
     id: number; 
 
     name: string; 
 
     email: string; 
 
     ic: number; 
 
     birth_date: string; 
 
     home_phone: number; 
 
     phone: number; 
 
     is_active: boolean; 
 
     is_admin: boolean; 
 
     from_social_account: boolean; 
 
     is_superuser: boolean; 
 
     status: boolean; 
 
     created_at: any; 
 
     updated_at: any; 
 
     groups: any; 
 
     permissions: any; 
 
     addresses: any; 
 
     all_permissions: any; 
 
     auth_token: string; 
 
     is_customer: boolean; 
 
     is_partner: boolean; 
 
     last_login: string; 
 
     profile: any; 
 
     requests: any; 
 
     skills: any; 
 
     social_providers: any; 
 
     wallets: any; 
 
     errors: any = null; 
 
     birth_date_no_formatted: string; 
 
     main_address: any; 
 
    } 
 
    @Injectable() 
 
    export class UserService { 
 
     private headers: Headers = new Headers(Constant.DEFAULT_HEADERS); 
 
     private url: string = `${Constant.API_HOST}${Constant.API_PREFIX}${Constant.API_V1}`; 
 
     constructor(
 
     private http: Http) { } 
 
     get(_id: number): Promise<User> { 
 
     let url = `${this.url}users/${_id}/`; 
 
     return this.http.get(url, { headers: this.headers }) 
 
      .toPromise().then(response => response.json() as User).catch(this.handleError); 
 
     } 
 
     
 
     private handleError(error: any): any { 
 
     console.log(JSON.stringify(error)); 
 
     return {errors: StaticMethods.formatSubmitErrors(error.json()) }; 
 
     } 
 
    }
+0

'{{user | json}}'의 응답을 추가 할 수 있습니까? –

+0

안녕하십니까, 답변 해 주신 json이이 링크에 있습니다. https://pastebin.com/D9pZDFHs 감사합니다. –

+0

모두들 고맙습니다. 초기 값을 가진 객체 클래스를 선언하고 잘 작동한다고 fixt 수 있습니다!, 감사합니다. –

답변

1

귀하의 코드는 실제로는하지만 반환 약속 데이터까지 널 (null) 값을 표시하려고 작동합니다.

문제를 해결하려면, 당신은이 같은 safe-navigation operator를 사용할 수 있습니다 때 사용자가 null가 아닌

{{ user?.id }} 

그래서, ID와 다른 사람이 읽기 전용입니다.