Angular2:如何编辑字段

时间:2016-02-06 12:59:37

标签: javascript angular angular2-forms

我正在构建联系人列表应用,其中用户可以使用输入字段添加联系人,就像我们通常用于获取数据一样,我已完成添加和删除联系人但我对此将如何困惑通过单击添加的联系人旁边的按钮编辑添加的联系人,情况是我单击编辑按钮,联系人将在输入字段中,我将编辑联系人并单击更新按钮,编辑后的联系人将在那里返回在联系人列表中,我可能会得到投票,但我真的想知道如何在输入字段中联系回来进行编辑。

这里我写的是它将id作为参数

updateparent(value){
    for(var i = 0; i < this.array.length ; i++){
    console.log('inside for');
    if(value == this.array[i].idobj){

        break;    
    }
}

接下来会发生什么? :)

父母的HTML:

<h1 class= "text-center">ToDo App</h1>
<div class = "form-group">
<lable>Task</lable>
<input name = "tasks" #task class = "form-control" >
<lable>Detail</lable>
<input type = "text" name = "taskdetail" #detail class = "form-control"  >
<button type = "submit" class  = "btn btn-default" 
(click) = "addtask(task, detail)">Add Task</button>
<child-component *ngFor = "#todo of array" 
[taskobject] = "todo"   (childevent) = "deleteparent($event)">
Loading...   </child-component>
</div> 

子组件的HTML,用于显示从父级获取的数据:

{{taskobject.taskobj}}
{{taskobject.detailobj}}
{{taskobject.idobj}}
<button type = "button" class = "btn btn-default" 
(click) =   "deletetask(taskobject.idobj)">Delete</button>
<button type = "button" class = "btn btn-defualt"
(click) = "updatetask(taskobject.idobj)">Update</button>

`

1 个答案:

答案 0 :(得分:0)

如果您的contact number只是数组中的一个值,那么匹配现有的联系人值以及当您获得index(或i)的值时 对于匹配只是splice来自数组的值,然后使用push方法更新数组中的新值。 像这样:

updateparent(value){
    for(var i = 0; i < this.array.length ; i++){
    console.log('inside for');
    if(value == this.array[i].idobj){
        this.array.splice(i,1);
        var newContact = value
        this.array.push(value);     
        break;    
    }
}
希望它对你有所帮助!如果没有提供plnkr代码我将使其正确!