为什么使用对象数组绑定修改 Ionic 2 列表在模态中不起作用

Question

请看这个 plnkr 示例。添加或删除步骤时，列表会相应更新。现在单击列表中的任何一个项目以删除项目。这将打开一个带有删除按钮的模式。单击删除按钮后，项目将从数组中删除，但显示不再更新。在此之后，添加和删除按钮不再起作用。我做错了什么？

http://plnkr.co/EbbkZb

import {Page, Alert} from 'ionic-angular/index';
import {NavController,NavParams} from "ionic-angular/index";
import {Modal} from "ionic-angular/index";
import {ViewController} from "ionic-angular/index";

@Page({
    template: `
  <ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
</ion-navbar>
<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
  <button (click)="addStep()">Add Step</button>
  <button (click)="deleteFirst()">Delete Step</button>
</ion-content>
<ion-list inset>
 <button ion-item 
            *ngFor="#step of steps"
            (click)="editStep(step)" >
      <ion-icon name='planet' item-left></ion-icon>
      {{step.name}}
    </button>
</ion-list>
  `,
})
export class Page1 {
    private steps: any;
    constructor(private nav:NavController) {
      this.steps = [];
      this.steps.push({id: 1, name: "step1"});
    }
    editStep(step) {
        let modal = Modal.create(MyModal,step);
        this.nav.present(modal);
        modal.onDismiss(data => {
          console.log("on dismiss");
          console.log(data);
          var stepIndex = this.steps.findIndex(function(step){
            return step.id == data;
          });
          console.log("at index");
          console.log(stepIndex);
          this.steps.splice(stepIndex,1);
          console.log(this.steps);
        });
    }
    addStep(){
       let id = Math.floor(Math.random() * 6000) + 1;
       this.steps.push({ id: id, name: "step"+id});
       console.log("adding step with id " + id);
       console.log(this.steps);
    }
    deleteFirst(){
       if(this.steps.length > 0){
         this.steps.splice(0,1);
         console.log("after deleting first");
         console.log(this.steps);
       }
    }
}

@Page({
    template: `
    <ion-toolbar>
        <ion-title>MyMocal</ion-title>
        <ion-buttons end>
        <button nav-pop>
            <ion-icon [name]="'close'"></ion-icon>
        </button>
    </ion-buttons>
    </ion-toolbar>
  <ion-content padding>
    <button danger (click)="deleteStep()">Delete</button>
  </ion-content>`
})
export class MyModal {
    private step: any;
    constructor(private nav:NavController, private viewCtrl:ViewController, private params: NavParams) {
       console.log("my mocal constructor ");
       console.log(this.params.data);
       this.step = this.params.data;
    }
    deleteStep() {
        let confirm = Alert.create({
            title: 'Delete Step?',
            buttons: [
                {
                    text: 'Yes',
                    handler: () => {
                        console.log("deleting " + this.step.id);
                        this.viewCtrl.dismiss(this.step.id);
                    }
                },
                {
                    text: 'No'
                }
            ]
        });
        this.nav.present(confirm);
    }
}

Answer 1

尝试像这样使用模态：

 constructor(public modalCtrl: ModalController) {
 }
 editStep() { 
   let modal = this.modalCtrl.create(MyModal,step);
   modal.present();
   modal.onDismiss(data => {
      //your rest of the code goes here
    });
 }

Answer 2

谢谢迪帕克，这就是问题所在。在我添加了适当的引用后，它起作用了。