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

我的表单中有一个输入字段。如何将值从输入字段存储到临时数组并将其显示在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>

test.ts

export class App { 

public contact:any[]; 

} 
    constructor() { 


    } 

}

我的样品Plunker code。

来源

2017-10-09 Deepak Vijay

Hi Deepak。为了帮助当前和未来的读者，我在过去对您的帖子进行过多次编辑。一些相同的问题不断出现;我想知道我是否可以向你提及他们，所以志愿编辑的工作量较少？特别有两件事：当提到你自己时（“我”），它总是大写，没有例外。另外，没有必要在您的问题中添加“请帮助我”。读者知道你需要帮助，所以这看起来像乞讨。谢谢！ – halfer

@halfer：相信我会遵循这个程序（Y） –

保持你的代码的一些变化

设置本地模板变量输入。
列表李和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

来源

2017-10-09 11:20:19 Vega

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

这仅仅是一个例子牢记你的背景，你可以但使用它，你请。

来源

2017-10-09 11:12:56 imixtron

谢谢你给我的想法:) .. –

永远在这里为社区人！ – imixtron

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

回答

相关问题