如何將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頁面

回答

相關問題