组件查看不显示数据已解决的数据

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

希望这有助于！