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

我是离子框架的新手。在这里，我试图在新页面中显示从主页收到的参数。我尝试了以下代码。但目前没有任何显示。任何人都可以告诉我我错过了什么。如何将ts文件中收到的参数显示到html页面

谢谢。

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>

来源

2017-08-05 S S

“navParams”的代码是什么样的？你确定它正在返回你期望的对象吗？ – Claies

@Claies是的，我得到像这样的价值“{”uid“：”121221“，”displayName“：”测试用户“，”photoURL“：”https://scontent.xx.fbcdn.net/v/t1 .0-1/s100x100/13891932_1288454467839950_3149500025504162596_n.jpg？ –

我明白我的错误。我必须对此数据执行JSON.parse –

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

这是没有必要使用订阅更新USERPROFILE。当某些事件（如login（），loadProfile（））被触发时，这可能会有帮助。因为这将触发相应的任务，您可以包含功能this.userProfile = navParams.get("userProfile");或其他相关的任务。

来源

2017-08-06 04:01:56

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

回答

相关问题