Angular 2 - Json解析爲TypeScript對象

我是Angular 2和TypeScript中的新成員，我已經閱讀了許多文章和教程，但是我還沒有找到解決方案。Angular 2 - Json解析爲TypeScript對象

我正在使用Angular 2庫進行HTTP調用，它工作正常，所以我收到一個JSON作爲響應，當我從JSON解析到TypeScript時，它不適用於類中的內部對象，如下所示爲例：

class Class1 { 
    id: number; 
    object: Class2; 
} 

class Class2 { 
    name: String; 
}

當我嘗試訪問「id」屬性從Class1的它工作正常，但是當我嘗試訪問「object.name」這是行不通的。

我的代碼：

@Injectable() 
export class ProfileService { 

    private mainInformationURL = 'http://localhost:8081/professionalprofile-core/getProfileMainInformation?userId'; 

    constructor(private http: Http) {} 

    getMainInformation(userId: Number) { 
     const url = `${this.mainInformationURL}=${userId}`; 
     let mainInformation: Profile; 
     let teste: Profile; 
     return this.http 
       .get(url, { headers: this.getHeaders() }) 
       .map(response => <Profile>response.json()) 
       .catch(this.handleError); 
    } 

    private getHeaders(): Headers { 
     let headers = new Headers(); 
     headers.append('Accept', 'application/json'); 
     return headers; 
    } 

    private handleError(error: any): Promise<any> { 
     console.log('An error occurred', error); // for demo purposes only 
     return Promise.reject(error.message || error); 
    } 
} 



export class ProfileComponent implements OnInit { 

    mainInformation: Profile; 

    constructor(
     private profileService: ProfileService 
    ) {} 

    ngOnInit(): void { 
     this.getMainInformation();  
    } 

    getMainInformation() { 
     this.profileService.getMainInformation(1) 
      .subscribe(
       data => this.mainInformation = data, 
       err => console.log(err), 
      ); 
    } 

} 

export class Profile { 
    id: ProfileId; 
    professionalHeadline: String; 
    industry: String; 
    summary: String; 
    mainProfile: Boolean; 
    mainContact: Contact; 

    constructor(
     id: ProfileId, 
     professionalHeadline: String, 
     industry: String, 
     summary: String, 
     mainProfile: Boolean, 
     //mainContact: Contact 
    ) { 
     this.id = id; 
     this.professionalHeadline = professionalHeadline; 
     this.industry = industry; 
     this.summary = summary; 
     this.mainProfile = mainProfile; 
    } 

} 

export class ProfileId { 
    user: User; 
    language: String; 

    constructor(
     user: User, 
     language: String, 
    ) { 
     this.user = user; 
     this.language = language; 
    } 
} 

export class User { 
    id: Number; 
    firstName: String; 
    surname: String; 

    constructor(
     id: Number, 
     firstName: String, 
     surname: String 
    ) { 
     this.id = id; 
     this.firstName = firstName; 
     this.surname = surname; 
    } 
} 



<header class="panel-heading profile_header"> 
      <img class="img-circle" width="150" height="150"> 
      <h1 class="name">{{mainInformation?.id?.user?.name}}</h1> 
      <div class="main_information"> 
       <p>{{mainInformation?.professionalHeadline}}, {{mainInformation?.industry}}</p> 
       <span class="icon fa-map-marker">Toronto, ON, Canada</span> 
       <span class="icon fa-phone icon-margin-left-15px">+11123454577</span> 
      </div> 
     </header>

來源

2017-01-02 Renan

什麼是錯誤？ –

沒有錯誤，當我嘗試訪問時，屏幕上沒有信息。當我調試代碼時，我可以看到信息以json格式顯示，但是當我創建psrse時，我無法訪問。 – Renan

<h1 class="name">{{mainInformation?.id?.user?.name}}</h1>

好像你正在試圖訪問user.name但是類User沒有name屬性：

export class User { 
    id: Number; 
    firstName: String; 
    surname: String; 
}

來源

2017-01-02 21:58:13 user1696255

'類用戶沒有名稱屬性' - 這是一個錯誤 –

謝謝，我只是沒有意識到這個錯誤。現在工作:) – Renan

我想你的意思是這你檢查他是否是實例，然後施放他

if (obj instanceof ObjType) { 
      this.obj = <ObjType>obj; 
}

來源

2017-01-03 00:04:02

Angular 2 - Json解析爲TypeScript對象

回答

相關問題