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

【问题标题】：how to send data from model to screen?如何将数据从模型发送到屏幕？
【发布时间】：2016-05-24 05:19:25
【问题描述】：

我想使用模型添加待办事项。当我单击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();
  }
}

如何在列表中设置数据..？如何更新待办事项数组？

【问题讨论】：

标签： javascript angularjs angular ionic2 angular2-routing

【解决方案1】：

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

这些对 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 数组中。

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

【讨论】：

【解决方案2】：

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

这里是使用 Eventemitter 的简单 Workarea 可能会对您有所帮助。

我的 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

【讨论】：

嗯，如果您需要任何帮助，请在此处发表评论。