角度2:如何编辑字段

Angular2: How to edit a field

本文关键字：编辑 字段 何编辑 角度      更新时间：2023-09-26

我正在构建联系人列表应用程序，用户可以在其中使用输入字段添加联系人，就像我们通常获取数据一样，我已经完成了添加和删除联系人，但我对如何通过单击添加的联系人旁边的按钮来编辑添加的联系人感到困惑，情况是我单击编辑按钮，联系人将在输入字段中，我将在其中编辑联系人并单击更新按钮编辑后的联系人将回到联系人列表中，我可能会得到投票，但我真的很想看看它会像输入字段中的联系人一样发生。

在这里，我为它写了以id为参数的内容

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

如果之后呢？:)

父级的网页：

<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>
`

如果你的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 代码，我会让它正确！

相关文章：