Question

我尝试使用页面中添加的相同项目在模态视图中编辑所选项目。

这是我的index.html

<button ion-button (click)="edit(item)">
          <ion-icon name="redo"></ion-icon>Edit
        </button>

**这是我的index.ts

addItem(){

    let addModal = this.modalCtrl.create(AddItemPage);

    addModal.onDidDismiss((item) => {

          if(item){
            this.saveItem(item);
          }

    });

    addModal.present();

  }
edit(item){
  this.navCtrl.push(AddItemPage, {
    key: item.$key,
    listname: item.listname,
    today: item.today,
    description: item.description
  });
}

这是我的additem.ts

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

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

  listname: string;
  time: string;
  description: string;
  today: Date;
  constructor(public navCtrl: NavController, public view: ViewController) {

  }

  saveItem(){

    let newItem = {
      listname: this.listname,
      time: this.time,
      today: this.today,
      description: this.description,
      toogleIncomplete: this.toogleIncomplete,
      toogleComplete: this.toogleComplete,
    };

    this.view.dismiss(newItem);

  }

  close(){
    this.view.dismiss();
  }

}

这是我的additem.html

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>
      Add Item
    </ion-title>
      <ion-buttons end>
        <button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
      </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>

    <ion-item>
      <ion-label floating>List Name</ion-label>
      <ion-input type="text" [(ngModel)]="listname"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Time</ion-label>
      <ion-input type="text" [(ngModel)]="time"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Description</ion-label>
      <ion-input type="text" [(ngModel)]="description"></ion-input>
    </ion-item>

    <ion-item>
     <ion-label>Incomplete</ion-label>
    <ion-toggle  ng-model="toogleIncomplete">
  </ion-toggle>
</ion-item>

 <ion-item>
     <ion-label>Complete</ion-label>
    <ion-toggle  ng-model="toogleComplete">
  </ion-toggle>
</ion-item>

  </ion-list>

  <button full ion-button color="secondary" (click)="saveItem()">Save</button>

</ion-content>

我的添加项目成功..但编辑按钮无法正常工作，而且谷歌按钮也无效...帮助！ :(

我仍然混淆了如何处理我的编辑按钮。我确实试图研究这些问题，但仍然没有编辑按钮

Answer 1

我在你的代码中修改了一些东西：

AddItem（）函数应该有一个参数并将其传递给模态页面：

addItem(item){
    console.log('picked item: ', item);
    let addModal = this.modalCtrl.create(AddItemPage, {selectedItem: item});
    addModal.onDidDismiss((item) => {
        if(item) {
            console.log('returned item: ', item);
            // save item here
        }
    });
    addModal.present();
 }
}

AddItemPage应该在构造函数中注入NavParams以从前一页获取传递的参数。我还创建了一个对象selectedItem并将其分配给数据（而不是单独的字段）。

selectedItem: any;

constructor(
    public navCtrl: NavController, 
    public view: ViewController,
    public navParams: NavParams) {
    this.selectedItem = this.navParams.get('selectedItem');
}

最后saveItem（）函数在关闭时传递selectedItem，因此主页可以获取此数据。

saveItem() {
    console.log('saved item: ', this.selectedItem);
    this.view.dismiss(this.selectedItem);
}

我在这里做了一个工作的例子： https://stackblitz.com/edit/ionic-uryz6d

离子的编辑按钮不起作用

1 个答案: