Question

我有一个名为ProfileComponent的组件，它使用名为ProfileService的服务来检索其数据。 ProfileService有一个名为getProfile的方法，它返回一个promise。在then方法中，我将必要的配置文件数据分配给名为profile的组件上的公共属性。问题是，视图似乎没有等待解决在视图中显示信息的承诺。它只是给出一个错误，“属性未定义”。我已经看过使用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。由于您不知道数据何时准备就绪，您可以这样做：

使用空数据初始化您要在视图中显示的信息（以防止视图中出现错误）

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

提供加载弹出窗口，以便用户知道某些事情正在发生，并且禁用视图，直到信息准备就绪。
当信息准备就绪时，关闭弹出窗口，以便用户可以与视图进行交互。

尽管使用可空变量可能有用，但您始终需要根据用户进行思考，以及如何让事情更易于理解。我很乐意使用首先向我显示空视图的应用程序，然后在几秒钟之后（并且不让我知道任何内容）视图会更改并显示信息。

Answer 2

我认为，你应该从 ngOnInit（）方法中的ProfileService中获取数据。您需要从＆＃39; @ angular / core＆＃39;导入{OnInit}。并把类实现它。在模板计算出来之前将处理ngOnInit（）方法（？）。最有可能在构造函数完成后（Promise仍未解决）显示模板并且配置文件仍然为null。希望这有帮助。我对Angular 2很新，所以我猜。

Answer 3

您需要为profile属性

创建一个空对象

选项1：

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

选项2：如果您不能实例化Profile（是一个接口），您可以使用可空属性

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

希望这会有所帮助!!

组件视图不显示从承诺

3 个答案: