Question

我或多或少地遇到了一个问题，即我无法在按钮按下事件中转移信息，但现在却是将信息从一页显示到另一页。他们在第3页上的详细信息，然后将其加载到第4页，这是具有不同属性的人员的列表，它在线连接到jsonblob的api，并且应该将输入的信息添加到api的底部。当我运行localport：8100时，应用程序现在变成白色空白。我只更改或编辑了这些页面，即可实现。

我的事件页面，即第4页events.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {MmaProvider} from '../../providers/mma/mma';

/**
 * Generated class for the EventPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-event',
  templateUrl: 'event.html',
  providers: [MmaProvider]
})
export class EventsPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {}


  ionViewDidLoad() {
    console.log(this.navParams.get('Name'));
    console.log(this.navParams.get('Age'));
    console.log(this.navParams.get('Weight'));
    console.log(this.navParams.get('Club'));
    console.log(this.navParams.get('Division'));
    console.log(this.navParams.get('Experince'));
  }


  private newMethod(): any {
    return 'ionViewDidLoad EventPage';
  }
}

和第3页contact.ts。这是perosn在其中输入其详细信息的地方

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { EventsPage } from '../events/events';
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {
    constructor(public navCtrl: NavController, public navParams: NavParams) {

    }
    ButtonClick() {
      let data = {
        title: 'fighter',
        Info: [
          'Name',
          'Age',
          'Weight',
          'Club',
          'Division',
          'YearsExperince'
        ], Rounds: '3 mins'

      };
      this.navCtrl.push(EventsPage, data)
    }
      ionViewDidLoad() {
      console.log('ionViewDidLoad RegisterPage');
      }
         }

和第3页contact.html。这是perosn在其中输入其详细信息的地方

<ion-header>
  <ion-navbar>
    <ion-title>
      Register
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-col width=50>
  <ion-list><ion-item>
    <strong>Registery page :</strong>Upcoming Event
  </ion-item>
  </ion-list>
  <ion-list>
    <ion-item>
      <ion-label color="primary">Name :</ion-label>
      <ion-input placeholder="Text Input"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label color="primary">Age :</ion-label>
      <ion-input type="number" placeholder=""></ion-input>
    </ion-item>

    <ion-item>
      <ion-label color="primary">weight :</ion-label>
      <ion-input placeholder="Input Weight"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label color="primary">Club :</ion-label>
      <ion-input placeholder="Input Club"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label color="primary">Division :</ion-label>
      <ion-input placeholder="Input Division"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label color="primary">YearsExperince :</ion-label>
      <ion-input placeholder="Input experince"></ion-input>
    </ion-item>



  </ion-list>
<ion-content padding>
  <form (ngSubmit)="saveUser()"></form>
    <button ion-button (click)="ButtonClick()"> Add Fighter</button>
    <p>
    Wriiten stuff goes here
    </p>
</ion-content>

离子3.在标签之间传输数据。我还是学生学习

0 个答案: