Question

我正在为Ionic Ecommerce应用程序工作，我正在研究用于添加和编辑收货地址的两个功能。

我使用了用于添加送货地址的模式，并且我想使用相同的模式来编辑送货地址。

这是我的 shipping.html ：

<ion-header>
  <ion-navbar>
    <ion-buttons>
      <button style="border: 1px solid;" navPop>
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2 class="myformh2">Add Your Shipping Address</h2>
  <form [formGroup]="shippingdet" (ngSubmit)="getShippingDetails()">
    <ion-list>
      <ion-item class="newitem2">
        <ion-input placeholder="Name" type="text" [(ngModel)]="userData.shipping_name" formControlName="shipping_name"
          required></ion-input>
      </ion-item>
      <ion-item class="newitem2">
        <ion-input placeholder="Mobile Number" type="number" [(ngModel)]="userData.shipp_mob" formControlName="shipp_mob"
          required></ion-input>
      </ion-item>
      <ion-item class="newitem2">
        <ion-input placeholder="Country" type="text" value="India" disabled></ion-input>
      </ion-item>
      <ion-item class="newitem2">
        <ion-select placeholder="Select State" [(ngModel)]="userData.shipp_state" formControlName="shipp_state"
          required (ionChange)="onChange(userData.shipp_state)">
          <ion-option *ngFor="let pstate of this.statesdetails" value="{{pstate.state_id}}">{{pstate.state_name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item class="newitem2">
        <ion-select placeholder="Select City" [(ngModel)]="userData.shipp_city" formControlName="shipp_city" required>
          <ion-option *ngFor="let pcity of this.citiesdetails" value="{{pcity.city_id}}">{{pcity.city_name}}</ion-option>
        </ion-select>
      </ion-item>
      <ion-item class="newitem2">
        <ion-input placeholder="Pincode" type="number" [(ngModel)]="userData.shipp_code" formControlName="shipp_code"
          required></ion-input>
      </ion-item>
      <ion-item class="newitem2">
        <textarea placeholder="Address" [(ngModel)]="userData.shipping_address" formControlName="shipping_address"
          required></textarea>
      </ion-item>
      <div>
        <button [disabled]="!shippingdet.valid" ion-button type="submit" class="newbtn11" color="primary" block>Submit</button>
      </div>
    </ion-list>
  </form>
</ion-content>

这是我用来添加送货地址的模式，我想使用相同的模式来编辑送货地址。

当用户单击以进行编辑时，它应显示为编辑您的收货地址，而不是添加您的收货地址，并且按钮文本也应更新，如“更新”和“也可以。

这是我的 shipping.ts ：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-shipping',
  templateUrl: 'shipping.html',
})
export class ShippingPage {
  shippingdet : FormGroup;
  userData = {"shipping_name": "", "shipp_mob": "", "shipp_code": "", "shipp_state": "", "shipp_city": "", "shipping_address": "",};
  states: any = [];
  statesdetails: any = [];
  cities: any = [];
  citiesdetails: any = [];
  responseData2: any;
  editdeta: any;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private formBuilder: FormBuilder, public restProvider: RestapiProvider,
    private storage: Storage) {
      this.shippingdet = this.formBuilder.group({
        shipping_name: ['', Validators.required],
        shipp_mob: ['', Validators.required],
        shipp_code: ['', Validators.required],
        shipp_state: ['', Validators.required],
        shipp_city: ['', Validators.required],
        shipping_address: ['', Validators.required],
      });

      if(navParams.get('itm'))
      {
        console.log(navParams.get('itm'));
        this.editdeta = navParams.get('itm');
        this.editshippingUser();
      }
      this.getAllStates();
  }
  getShippingDetails()
  {
    this.storage.get("ID").then((val) =>
    {
      if(val)
      {
       this.addShippingUsers(val);
      }
      else
      {
        console.log("Please Login");
      }
    });
    this.closeModal();
  }

  getAllStates()
  {
    this.restProvider.getstates()
      .then(data => {
      this.states = data;
      this.statesdetails = this.states.msg.states;
      });
  }

  onChange(selectedstate){
    this.getAllCities(selectedstate);
  }

  getAllCities($cid)
  {
    this.restProvider.getcities($cid)
      .then(data => {
      this.cities = data;
      this.citiesdetails = this.cities.msg.city;
      });
  }

  addShippingUsers($usid)
  {
    this.shippingdet.controls;
    this.restProvider.addshipping(this.userData, 'delivery_address/'+$usid).subscribe((data) => {
      if (data) {
        this.responseData2 = data;
      }
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ShippingPage');
  }

  closeModal() {
    this.navCtrl.pop();
  }

  editshippingUser()
  {
    this.userData.shipping_name = this.editdeta.name;
    this.userData.shipp_mob = this.editdeta.mobile;
    this.userData.shipp_code = this.editdeta.pincode;
    this.userData.shipp_state = this.editdeta.state_id;
    this.userData.shipp_city = this.editdeta.city_id;
    this.userData.shipping_address = this.editdeta.address;
  }
}

在这个ts文件中，我正在获取用于更新if(navParams.get('itm'))的此参数，当该参数存在时，我还应该更新模式和函数中的文本。

这是我添加送货地址的方式，我使用相同的模型来编辑送货地址，但问题是我无法显示“编辑您的送货地址”和“更新按钮”文本，也无法更新功能形式。

（ngSubmit）=“ getShippingDetails（）”

这是用于添加送货地址，我想在编辑表单时替换此功能。

非常感谢您的帮助。

Answer 1

您需要在打开此运输模型的位置添加条件，我在下面的代码中添加了两种情况

1）添加运费

var modalPage = this.modalCtrl.create（ShippingPage，{type：“ add”}）; modalPage.present（）;

2）编辑运送详细信息

var modalPage = this.modalCtrl.create（ShippingPage，{type：“ edit”}）; modalPage.present（）;

从发货页面中，您只需要获取navParams值并根据该值执行操作例如

var operationType = navParams.get（'type'）

在operationType中，您将获得需要执行的操作

Answer 2

这对我有用：

标题：

<h2 class="myformh2">{{(editMode ? 'Edit Your Shipping Address' : 'Add Your Shipping Address')}}</h2>

对于按钮：

<button [disabled]="!shippingdet.valid" ion-button type="submit" class="newbtn11" color="primary" block>{{(editMode ? 'Edit' : 'Submit')}}</button>

对于功能：

<form [formGroup]="shippingdet" (ngSubmit)="editMode ? editShippingDetails() : getShippingDetails()">

在ts文件中：

editMode: boolean = false;
if(navParams.get('itm'))
    {
        console.log(navParams.get('itm'));
        this.editMode = true;
    }

如何在Ionic中使用相同的模型进行添加和编辑

2 个答案: