【问题标题】:Angular2: How to edit a fieldAngular2:如何编辑字段
【发布时间】:2025-12-05 17:45:01
【问题描述】:

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

这是我为它写的,它以 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>

`

【问题讨论】:

  • 最好使用ng-model。你也可以提供html吗?
  • 在 Angular2 中没有ng-model,只有ngModel。 @flyingHawk 请更正标签以明确问题所在。
  • @parth 我已经包含了 html 文件
  • @GünterZöchbauer 我已经包含了 html 文件
  • @flyingHawk 您当前的代码+描述不清楚。很难找到,所以很容易理解,所以其他人可以帮助你。

标签: javascript angular angular2-forms


【解决方案1】:

如果您的 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 代码,我会改正的!

【讨论】:

  • 然后进入输入字段进行编辑,进入 HTML 文件
  • 我已经包含了html文件
  • 请您为您的代码提供 plnkr 吗?对我来说很容易解决错误!
  • 可以用新值推送到数组来更新记录。对于视图,您必须使用ng-model="taskdetail.taskdetail",因此当您更新它时,在您的范围内设置$scope.taskdetail = value。这也将更新视图。 @flyingHawk
  • 首先有ngModel而不是ng-model 其次没有$scope ...如果我们谈论范围,那么每当您的数组更新时,它就会自动设置新值并迭代新值设置不是吗?