Question

我的表单中有输入字段。

用于获取联系电话号码
用户可以添加多个联系号码;因此，我想使用单个输入字段
每当用户输入数字和（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>

test.ts

export class App {

public contact:any[];

}
  constructor( ) {


  }

}

我的样本Plunker code。

Answer 1

我使用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...
}

这只是一个示例，请记住您可以随意使用它的上下文。

Answer 2

保持代码的一些变化

在输入上设置本地模板变量。
列出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>

<强>打字稿：

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

DEMO

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

2 个答案: