Question

我想使用模型添加Todo。当我点击Add todo按钮（底部一个）时..它打开模型。我需要输入字段中输入的任何内容，它应该添加到列表中。

所以如何将输入字段数据发送到屏幕或页面。我想在模型和屏幕/页面之间共享数据。如何使用模型在列表中添加项目？

这是我的代码

http://plnkr.co/edit/N6aXDZXUr99MC6w77H6d?p=preview

import { Page ,ViewController} from 'ionic-angular/index';

@Page({
  template: `
  <ion-content padding>
    <h2>Add Todo!</h2>
    <input type='text' placeholder='Enter todo'>
     <button (click)="add()">ADD</button>
    <button (click)="close()">Close</button>
  </ion-content>`
})
export class MyModal {
  constructor(viewCtrl: ViewController) {
    this.viewCtrl = viewCtrl;
  }

  close() {
    this.viewCtrl.dismiss();
  }
  add(v){
   alert(v.value);
   v.value='';
    this.viewCtrl.dismiss();
  }
}

如何在列表中设置数据..？如何更新todo数组？

Answer 1

您尝试解决的问题实际上是如何将数据从模式传递回呈现它的页面，这样就可以使用模态的功能直接解决。

您的掠夺者的这些小改动按照您的意图工作，无需挂钩事件。

在home.ts上：

showModel(){
      let modal = Modal.create(MyModal);
        modal.onDismiss(data => {
        this.addItem(data);

      })
    this.nav.present(modal)
    }

在mymodel.ts：

上

  add(v){
    alert(v.value);
    this.viewCtrl.dismiss(v);
  }

当你关闭模态时，它会将值v传回你的主页。您的主页捕获onDismiss回调中的数据，并将其添加到todo数组。

编辑：工作人员：http://plnkr.co/edit/iKIfFYYoJolPkDgx2pxT?p=preview

Answer 2

我不知道离子但是你可以使用doint使用Eventemitter做同样的事情所以你调用一个函数单击添加模态的项目，并从textal.ts中触发一个事件，其值为textfield。您可以将文本字段的值添加到列表中： -

这里是使用Eventemitter的简单工作区可能对您有帮助。

我的app.ts： -

<div class="col-sm-12 col-md-6 text-center">
    <a *ngFor='#Number of numberList'>
        {{Number}} &nbsp; &nbsp; Click Button To Delete &nbsp; 
        <delete (deleteFun)="DeleteElement(Number)" [pk]='Number'></delete><br>
    </a>
</div>

从这里我正在解雇名为deleteFun的事件，并且从删除模式我正在捕捉这样的事件： -

DeleteFunction() {
  this.deleteFun.emit('emit');
}

Working Plunker

有关详细信息，请参阅此处

https://github.com/MrPardeep/Angular2-DatePicker

如何将数据从模型发送到屏幕？

2 个答案: