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

Question

我想使用模型添加待办事项。当我单击 Add todo 按钮（底部）时。它会打开模型。我需要在输入字段中输入的任何内容，它应该添加到列表中..

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

这是我的代码

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

我不知道 ionic 但是是的你可以使用 Eventemitter by doint 做同样的事情所以你调用一个函数单击添加模式项，一个事件从您的 modal.ts 中触发，值为文本字段。您可以轻松地将文本字段的值添加到您的列表中：-

这里是使用 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

Answer 2

您要解决的问题实际上是如何将数据从模态传递回呈现它的页面，使用模态的功能有一个简单的解决方案。

这些对你的 plunker 的小改动会如你所愿，不需要挂钩事件。

在你的 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 数组。

编辑： 正在工作的 plunker：http://plnkr.co/edit/iKIfFYYoJolPkDgx2pxT?p=preview

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

how to send data from model to screen?

javascript

angularjs

ionic2

angular2-routing

angular