Question

我正在尝试获取p标签的值，以便将其作为数据发送到下一页。 p标记在代码中标记。

HTML：

<ion-header>
    <ion-navbar color="primary">
        <ion-title name="title">Job Requests</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <div class="filter">
        <button class="islandwide" ion-button large>Islandwide</button>
        <button class="nearby" ion-button large>Nearby</button>
    </div>

    <ion-list>
        <ion-card *ngFor="let user of request | async" class="job">
            <button ion-item (click)="goToJobDetails()" class="info">
                <ion-avatar class="avatar" item-start>
                    <img src="../assets/icon/user_male-512.png">
                </ion-avatar>
                <h2 class="name">{{user.regdetails.username}}</h2>
                <p text-wrap class="address">
                    <ion-icon name="compass"></ion-icon> {{user.regdetails.address}}</p>
                <p ng-model="userkey">{{user.$key}}</p>
                <---- trying to pass this over </button>

        </ion-card>

    </ion-list>

</ion-content>

ts：

import { Component, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { JobdetailsPage } from '../jobdetails/jobdetails';
import { AngularFireDatabase, FirebaseListObservable } from 
'angularfire2/database';

@Component({
selector: 'page-request',
templateUrl: 'request.html'
})


export class RequestPage {

request: FirebaseListObservable<any>;
userkey: any;

constructor(private ef: ElementRef,public navCtrl: NavController, angFire: 
AngularFireDatabase) {
this.request = angFire.list('/request');
}

goToJobDetails(){
let data = {
  key: this.userkey
};
console.log(data);
this.navCtrl.push(JobdetailsPage, data);
}

}

尝试获取{{user。$ key}}

的价值并将其发送到下一页。

接收此数据的网页

ts

  ionViewDidLoad(){
  console.log(this.navParams.get('key'));
  }

Answer 1

在按钮点击事件中，您可以传递这样的值，

<button ion-item (click)="goToJobDetails(user.$key)" class="info">

在你的ts中，

goToJobDetails(data){      
   console.log(data);
   this.navCtrl.push(JobdetailsPage, {'param1':data});
}

从另一个页面检索它，你可以使用navParams，

ionViewDidLoad(){
      console.log(this.navParams.get('param1'));
   }

希望有所帮助

如何在离子中检索<p>标签的值？

1 个答案: