对象数组中的角度更新对象

phi*_*con 35 typescript angular

假设我有以下对象数组,请将其命名为itemArray;

{
  "totalItems": 2,
  "items": [
    {
      "id": 1,
      "name": "foo"

    },
    {
      "id": 2,
      "name": "bar"
    },
    ]
}
Run Code Online (Sandbox Code Playgroud)

我有一个订阅,返回只有id 2的更新结果.如何在不循环整个数组的情况下更新对象数组?

我想要的是类似下面的例子;

updateUser(user){
    this.myservice.getUpdate(user.id)
    .subscribe(newitem => {
      this.updateArray(newitem);
    });
}

  updateArray(newitem){
    this.itemArray.items[newitem.id].name = newitem.name
  }
Run Code Online (Sandbox Code Playgroud)

甚至更好,更换整个物体;

  updateArray(newitem){
    this.itemArray.items[newitem.id] = newitem
  }
Run Code Online (Sandbox Code Playgroud)

但是,此示例根据数组的索引更新数组.那么我如何根据newitem.id进行更新呢?

评论中要求的模板:

<tr *ngFor="let u of itemsArray.items; let i = index">
  <td>{{ u.id }}</td>
  <td>{{ u.name }}</td>
  <td>
    <input type="checkbox" checked="u.accepted" [(ngModel)]="itemsArray.items[i].accepted" (ngModelChange)="updateUser(u)">
    <label for="singleCheckbox-{{i}}"></label>
  </td>
</tr>
Run Code Online (Sandbox Code Playgroud)

Neh*_*hal 55

我根据你的例子创建了这个Plunker,它将对象更新为newItem.id

这是我的功能片段:

showUpdatedItem(newItem){
    let updateItem = this.itemArray.items.find(this.findIndexToUpdate, newItem.id);

    let index = this.itemArray.items.indexOf(updateItem);


    this.itemArray.items[index] = newItem;

  }

  findIndexToUpdate(newItem) { 
        return newItem.id === this;
  }
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助.

  • 出色的!我唯一感到困惑的是如何刷新屏幕上的数组。 (2认同)
  • 正确答案,但可以通过使用 findIndex 来缩短。 (2认同)

Eld*_*d0w 24

直接更新作为参数传递的项目应该可以完成这项工作,但我可能在这里遗漏了一些东西?

updateItem(item){
  this.itemService.getUpdate(item.id)
  .subscribe(updatedItem => {
    item = updatedItem;
  });
}
Run Code Online (Sandbox Code Playgroud)

编辑:如果你真的别无选择,只能遍历整个数组来更新项目,请使用findIndex:

let itemIndex = this.items.findIndex(item => item.id == retrievedItem.id);
this.items[itemIndex] = retrievedItem;
Run Code Online (Sandbox Code Playgroud)


小智 11

另一种方法可能是:

let myList = [{id:'aaa1', name: 'aaa'}, {id:'bbb2', name: 'bbb'}, {id:'ccc3', name: 'ccc'}];
let itemUpdated = {id: 'aaa1', name: 'Another approach'};

myList.find(item => item.id == itemUpdated.id).name = itemUpdated.name;
Run Code Online (Sandbox Code Playgroud)

// item代替iitem


小智 5

你也可以尝试这个来取代现有的对象

toDoTaskList = [
                {id:'abcd', name:'test'},
                {id:'abcdc', name:'test'},
                {id:'abcdtr', name:'test'}
              ];

newRecordToUpdate = {id:'abcdc', name:'xyz'};
this.toDoTaskList.map((todo, i) => {
         if (todo.id == newRecordToUpdate .id){
            this.toDoTaskList[i] = updatedVal;
          }
        });
Run Code Online (Sandbox Code Playgroud)


小智 5

尝试Array.ForEach()方法。

itemArray.ForEach(item =>{
    if(item.id == newitem.id){
        item.name = newitem.name
    }
});
Run Code Online (Sandbox Code Playgroud)