angular - 如何在 Ionic 3 中通过 ionic 输入将数据从一种形式传递到另一种形式？

Question

我想通过 ionic 输入将数据从一个页面传递到另一页面。 我用的是 ionic 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 文件中，但如何在 ionic 输入上绑定(bind)/显示？ 提前致谢。

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>