Question

我想在离子输入上将数据从一个页面传递到另一个页面。我正在使用离子3。这是我的代码......

home.ts文件

viewEntry(ID, name, description){

    alert(ID);
    alert(name);
    alert(description);

    this.navCtrl.push(AddtechnologyPage, {ID: ID, name: name, description: description});
}

addtechnology.ts文件

constructor(public navCtrl: NavController,
          public navParams: NavParams,
          public http: Http,
          public fb: FormBuilder,
          public toastCtrl: ToastController) {

     this.recordID = navParams.get('ID');
     this.technologyName = navParams.get('name');
     this.technologyDescription = navParams.get('description');


     console.log(this.recordID);
     console.log(this.technologyName);
     console.log(this.technologyDescription);


    // Create form builder validation rules
    this.form = fb.group({
        "name"                  : ["", Validators.required],
        "description"           : ["", Validators.required]
    });
}

addtechnology.html文件

<form [formGroup]="form">

      <ion-list>
         <ion-item-group>
            <ion-item-divider color="light">Technology Name *</ion-item-divider>
            <ion-item>
               <ion-input
                  type="text"
                  placeholder="Enter a name..."
                  formControlName="name"
                  [(ngModel)]="technologyName" ></ion-input>
            </ion-item>
         </ion-item-group>
         <ion-item-group>
            <ion-item-divider color="light">Technology Description *</ion-item-divider>
            <ion-item>
               <ion-textarea
                  placeholder="Description..."
                  formControlName="description"
                  rows="6"
                  [(ngModel)]="technologyDescription"></ion-textarea>
            </ion-item>
         </ion-item-group>


         <ion-item>
            <button
               ion-button
               color="primary"
               text-center
               block
               [disabled]="!form.valid"
               (click)="saveEntry()">Save Entry</button>
         </ion-item>

      </ion-list>

   </form>

我想显示addtechnology.html的ion-input数据。数据显示在addtechnolgy.ts文件中但是如何在离子输入上绑定/显示？提前谢谢。

Answer 1

您可以在初始化表单时传递值，如下所示：

// Create form builder validation rules
this.form = fb.group({
    "name": [this.technologyName, Validators.required],
    "description": [this.technologyDescription, Validators.required]
});

然后在每个输入中，只使用表单控件（而不是表单控件和ngModel）：

      <ion-item-group>
        <ion-item-divider color="light">Technology Name *</ion-item-divider>
        <ion-item>
           <ion-input
              type="text"
              placeholder="Enter a name..."
              formControlName="name"></ion-input>
        </ion-item>
     </ion-item-group>
     <ion-item-group>
        <ion-item-divider color="light">Technology Description *</ion-item-divider>
        <ion-item>
           <ion-textarea
              placeholder="Description..."
              formControlName="description"
              rows="6"></ion-textarea>
        </ion-item>
     </ion-item-group>

如何在Ionic 3中的离子输入上将数据从一种形式传递到另一种形式？

1 个答案: