Question

我创建了一个数组，并使用Modal将项目添加到该数组中。现在，我需要通过从列表中选择项目来对其进行编辑。请帮助我使用该守则。如何将项目取为模态并将已编辑的项目带回列表中的同一位置

HOME.HTML

    <ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item *ngFor="let grocery of itemsArray">{{grocery}}</ion-item>
  </ion-list>
  <button ion-button round (click)="addItem()">Add Item</button>
</ion-content>

HOME.TS

    export class HomePage {

  public itemsArray = [];
  newItem: any;
  constructor(public navCtrl: NavController, public modalCtrl: ModalController, public navParams: NavParams) {
  }
  ionViewDidLoad() {
    this.newItem = this.navParams.get('data');
    this.itemsArray = [

    ];

  }
  public addItem() {
    let modalPage = this.modalCtrl.create(ModalPage);
    modalPage.onDidDismiss(data => {
      this.itemsArray.push(data.name
);
    });
    modalPage.present();
  } 



}

MODAL.HTML

    <ion-header>
  <ion-navbar>
    <ion-title>Add Item</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Item</ion-label>
      <ion-input type="text" [(ngModel)]="newItem"></ion-input>
    </ion-item>
    <button ion-button color="secondary" (click)="add()">Add Item</button>
  </ion-list>
</ion-content>

MODAL.TS

    export class ModalPage {
  name:any;
  newItem: any;

  constructor(public navCtrl: NavController, public viewCtrl: ViewController, public navParams: NavParams) {

  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalPage');
  }
  public closeModal() {
    this.viewCtrl.dismiss();

  }
  //add() {
  //  let data = {"name": this.newItem};
  //  this.viewCtrl.dismiss(data.name)
 // }
 add() {
  let data = {"name": this.newItem};
  this.viewCtrl.dismiss(data)
}

}

直到现在的代码都可以正常工作。

Answer 1

我建议您使用警报控制器来简化您的用例中的代码。如果需要模态-以后可以详细说明代码。

尝试这种方法：

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list *ngFor="let grocery of itemsArray; let i = index">
    <ion-item (click)="changeItemName(grocery, i)">{{grocery}}</ion-item>
  </ion-list>
  <button ion-button round (click)="addItem()">Add Item</button>
</ion-content>

将迭代器放置在列表上并捕获每个项目的“索引”，这样，如果单击列表中的特定项目以及实际的杂货项目名称，就可以传递该值。

在您的home.ts中：

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public itemsArray = ["milk", "butter", "bread"];
  newItem: any;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController, public navParams: NavParams) {

  }

  public changeItemName(currentName, index) {
    let alert = this.alertCtrl.create({
      title: 'Change grocery item name:',
      message: 'current: "' + currentName + '"',
      inputs: [
        {
          placeholder: 'type in a new name'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
        },
        {
          text: 'Confirm',
          handler: data => {
            if (data[0].length === 0) {
              this.itemsArray[index] = currentName;
            } else {
              this.itemsArray[index] = data[0];
            }
          }
        }
      ]
    });
    alert.present();
  };

  public addItem() {
    let index = this.itemsArray.length;
    this.changeItemName("New item", index);
  }

}

您可以使用警报控制器显示带有输入字段的小弹出窗口。在代码中，您将看到我们将参数传递给它，并且我们修改了列表项的名称，或者如果addItem方法调用了change name方法，则将项添加到列表中。

让我知道这是否对您有帮助。

这是一个有效的代码段：https://stackblitz.com/edit/ionic-urbtag

在Ionic 3中使用模态编辑列表中的项目

1 个答案: