离子 2 从 ts 文件中引用 html 文件中的值?



我正在从 Firebase 查询一组数据,并成功将数据列表拉到我的 html 页面。有没有办法在我的 onViewProfile 函数中从 html 页面引用相应的 item.uid 值,以便我可以将其推送到另一个页面?谢谢。强调文本

网页文件

<ion-content padding>
   <ion-label>Type</ion-label>
    <ion-select [(ngModel)]="type" (ionChange)="searchPitchesByType(type)">
      <ion-option value="test1">test1</ion-option>
      <ion-option value="test">test</ion-option>
    </ion-select>
<ion-list>
    <ion-item *ngFor="let item of pitches | async">
      Name: {{ item.name }}
      <p>
        Description:{{ item.description }}
      </p>
      <p>
        uid:{{ item.uid }} 
      </p>
      <button right ion-button icon-only (click)="onViewProfile()">
        <ion-icon name="add"></ion-icon>
      </button>
   </ion-item>
  </ion-list>
</ion-content>

TS 文件

export class DiscoverPage {
   public pitches: FirebaseListObservable<any>;
  constructor(
  private navCtrl: NavController,
   private loadingCtrl: LoadingController,
   private popoverCtrl: PopoverController,
    public afDatabase: AngularFireDatabase
    ) {this.pitches = afDatabase.list('/Pitches/');}
searchPitchesByType(type: string){
  this.pitches = this.afDatabase.list('Pitches', {
    query: {
      orderByChild: 'type',
      equalTo: type
    }
  })

}
onViewProfile() {
  let data = {
    uid: **(uid that corresponds to the uid in html)**

  }
    console.log(this.navCtrl.push(ViewProfilePage, data));
}
}

嗯,它是如此简单,以至于我觉得我没有做对。

您必须将其作为这样的参数传递

<ion-item *ngFor="let item of pitches | async">
      Name: {{ item.name }}
      <p>
        Description:{{ item.description }}
      </p>
      <p>
        uid:{{ item.uid }} 
      </p>
      <button right ion-button icon-only (click)="onViewProfile(item)">
        <ion-icon name="add"></ion-icon>
      </button>
</ion-item>

然后你的 ts 会变成

onViewProfile(item) {
  let data = {
    uid: item.uid

  }
    console.log(this.navCtrl.push(ViewProfilePage, data));
}

相关内容

  • 没有找到相关文章

最新更新