如何将输入字段中的值存储到临时数组，并在Angular2的列表中显示它？

我的表单中有一个输入字段

• 它是用来获取联系电话的
• 用户可以添加多个联系人号码；因此，我希望使用单个输入字段，而不是使用多个字段作为联系人信息
• 每当用户输入号码和（OnChange）事件时，联系人应存储在临时数组中，并在下面的列表中列出
• 在该列表中，如果用户愿意，他可以删除他添加的联系人

我已经添加了示例代码。我需要的条件。我试着用我的概念来做，但是我被卡住了

template.html

   <div class="col-md-4">
        <div class="md-form">
        <i class="fa fa-mobile prefix" style="font-size: 46px; margin-top: -10px;"></i>
        <input type="text" id="rec4" class="form-control" (change)="store()" ng-model="contact"> 
        <label for="rec4" class="">Contact Number</label>
        </div>
       </div>

<ul>
<li>{{data1}}></li><li><{{data2}}></li>
<ul>

---

我的样本。

我通过使用

keyup.enter来克服这个问题。基本上，只要您点击
ENTER
（返回）键，就会调用该函数

您可以按如下方式使用它：

//template
<input type="text" (keyup.enter)="store()" [(ng-model)]="contact">
<ul>
    <li *ngFor="let c of contactList">{{c}} <button (click)="removeContact(c)">remove</button> </li>
</ul>


//.ts
private contactList: Array<string> = [];
public store(){
    this.contactList.push(contact)
    this.contact = null;
}
public removeContact(number){
    //remove logic here...
}

//模板

{{c}删除

//.ts
私有联系人列表：数组=[]；
公共商店（）{
此.contactList.push（联系人）
this.contact=null；
}
公共删除联系人（编号）{
//删除这里的逻辑。。。
}

这只是一个示例，请记住您的上下文，您可以随意使用它。
对代码进行一些更改

在输入上设置本地模板变量
使用li和ngFor列表，不要忘记使用trackBy跟踪
输入后将值设置为“”
不需要模型
HTML

 <input type="text" id="rec4" #input class="form-control" (change)="store(input.value); input.value=''"> 
....
<ul>
  <li *ngFor="let d of data; let i=index; trackBy: trackByFn">
     {{d}}
  </li>
<ul>

你好，迪帕克。为了帮助现在和将来的读者，我在过去对你的文章做了很多编辑。一些同样的问题不断出现；我想知道我是否可以向你们提到它们，这样志愿者编辑的工作就少了？特别是两件事：当提到你自己（“我”）时，它总是大写，没有例外。此外，没有必要在您的问题中添加“请帮助我”。读者们知道你需要帮助，所以这看起来像是在乞讨。谢谢@哈弗：当然，我会遵循这个程序（Y）
 <input type="text" id="rec4" #input class="form-control" (change)="store(input.value); input.value=''"> 
....
<ul>
  <li *ngFor="let d of data; let i=index; trackBy: trackByFn">
     {{d}}
  </li>
<ul>

store(newValue){
   this.data.push(newValue);
   console.log(this.data)
 }