如何将ts文件中收到的参数显示到html页面

时间:2017-08-05 13:04:31

标签: angular typescript ionic2

我是离子框架的新手。在这里,我试图在我的新页面中显示从主页收到的参数。我试过以下代码。但目前没有显示任何内容。谁能告诉我我错过了什么。

谢谢。

about.ts

export class AboutPage {
    userProfile: any = null;
    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.userProfile = navParams.get("userProfile");
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad AboutPage');
    }
    goBack() {
        this.navCtrl.pop();
    }
}

about.html

<ion-content padding>
    <p>This is About Us Page.</p>
    <ion-card *ngIf="userProfile">
        <img [src]="userProfile.photoURL"/>
        <ion-card-content>
            <ion-card-title>
                {{ userProfile.displayName }}
            </ion-card-title>
            <p>
                The UID for this new user is {{userProfile.uid}} and the email is {{userProfile.email}}
            </p>
        </ion-card-content>
    </ion-card>

</ion-content>

1 个答案:

答案 0 :(得分:2)

请检查:https://ionicframework.com/docs/api/util/Events/

没有必要使用订阅来更新userProfile。当触发某些事件(例如,login(),loadProfile())时,这可能会有所帮助。因为这会触发相应的任务,您可以包含函数this.userProfile = navParams.get("userProfile");或其他相关的任务。