Редактирование элементов в списке с использованием модальных в Ionic 3

Question

Я создал массив и добавляю элементы в массив, используя модал.Теперь мне нужно отредактировать элемент, выбрав его из списка.Пожалуйста, помогите мне с Кодексом.Как получить элемент для модального просмотра и вернуть отредактированный элемент в том же месте в списке

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.

Дайте мне знать, если это полезно для вас.

Вот рабочий фрагмент: https://stackblitz.com/edit/ionic-urbtag