組件查看不顯示數據已解決的數據

Question

我有一個名爲ProfileComponent的組件，它使用名爲ProfileService的服務來檢索其數據。 ProfileService有一個名爲getProfile的方法，返回一個promise。在當時的方法中，我將必要的配置文件數據分配給稱爲配置文件的組件上的公共屬性。問題在於，該視圖似乎並未等待解決在視圖中顯示信息的承諾。這只是給出一個錯誤，「屬性未定義」。我看過使用Page life Cycle Hooks，但它沒有幫助解決問題。

成型件

import { Component , OnInit } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

import { Profile } from './profile'; 
import { ProfileService } from './profile.service'; 

@Component({ 
    selector:'profile', 
    templateUrl: 'build/profile/profile.component.html', 
    providers: [ProfileService] 
}) 
export class ProfileComponent{ 
    // public properties 
    profile: Profile; 

    constructor(private profileService: ProfileService){ 
     this.getProfile(); 
    } 

    private getProfile(){ 
     this.profileService.getProfile() 
     .then(data => { 
      console.log(data); // I see the needed data here 
      this.profile = data; 
     }); 
    } 
} 

檔案服務

imports... 
@Injectable() 
export class ProfileService { 

    profile: Profile = { 
       "firstName": 'Chelsea', 
       "lastName": 'Wilson', 
       "phone": '713-567-0957', 
       "email": 'julip@gmail.com', 
       "authorizationCode":'1232839475234537', 
       "agreementExpiration": new Date('12/31/2017'), 
       "ESIID" : '123294734SDFDSSD23' 
    }; 

    getProfile(){ 
     return Promise.resolve(this.profile); 
    } 
} 

資料查看

<div class="main-nav-wrapper"> 
    <div class="main-nav-content brite-card"> 
     <h2 class="brite-card-header">Personal Details</h2> 
     <div class="profile-item"> 
      <span class="profile-label">Name</span> 
      <span class="profile-detail">{{profile.firstName}} {{profile.lastName}}</span> 
     </div> 
     <div class="profile-item"> 
      <span class="profile-label">Email</span> 
      <span class="profile-detail">{{profile.email}}</span> 
     </div> 
     <div class="profile-item"> 
      <span class="profile-label">Phone Number</span> 
      <span class="profile-detail">{{profile.phone}}</span> 
     </div> 
     <div class="profile-item"> 
      <span class="profile-label">Authorization Code</span> 
      <span class="profile-detail">{{profile.authorizationCode}}</span> 
     </div> 
     <div class="profile-item"> 
      <span class="profile-label">Agreement Expiration Date</span> 
      <span class="profile-detail">{{profile.agreementExpiration}}</span> 
     </div> 
     <div class="profile-item"> 
      <span class="profile-label">ESIID</span> 
      <span class="profile-detail">{{profile.ESIID}}</span> 
     </div>  
    </div> 
</div> 

錯誤

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in build/profile/profile.component.html:5:41 
ORIGINAL EXCEPTION: TypeError: Cannot read property 'firstName' of null 

PS

我有其他組件和服務，一起工作，但我使用*ngFor，以顯示其信息，所以我認爲*ngFor正對的影響其他。

Answer 1

有更好的方法來處理這種情況。請看看this plunker。既然你不知道什麼時候數據準備就緒，你可以做這樣的：

1. 初始化你會在視圖中顯示的信息，空數據（爲了防止錯誤視圖）

   private profile: Profile = { 
         "firstName": '', 
         "lastName": '', 
         "phone": '', 
         "email": ', 
         "authorizationCode":'', 
         "agreementExpiration": '', 
         "ESIID" : '' 
   }; 
   

2. 目前裝載彈出，使用戶知道有些事情正在發生，並且還禁用視圖，直至信息已準備就緒。

3. 當信息準備就緒時，關閉彈出窗口，以便用戶可以與視圖進行交互。

儘管使用可爲空的變量可能有效，但您總是需要考慮用戶，以及如何讓他們更容易理解。我不會樂意使用首先向我顯示空白視圖的應用程序，然後幾秒鐘後（並且不讓我知道任何內容）視圖會更改並顯示信息。

Answer 2

我想，你應該從ProfileService裏取數據ngOnInit（）方法。您需要從'@ angular/core'導入{OnInit}並將類實現。 ngOnInit（）方法將在模板制定出來之前處理（？）。最有可能在你的構造函數完成之後（Promise仍然沒有解決）模板被顯示，並且配置文件仍然爲空。希望這個幫助。我對Angular 2真的很陌生，所以我猜測。

Answer 3

你需要的是創建一個空的對象profile財產，

選項1：

profile: Profile = new Profile(); // Provided its a class. 

選項2： 如果您可能不實例化配置文件（在接口），你可以使用可空物業

{{profile.firstName}} -> {{profile?.firstName}} 

希望這有助於！