對象數組中的角度更新對象

Question

假設我有以下對象數組，讓我們將其命名為 itemArray；

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

    },
    {
      "id": 2,
      "name": "bar"
    },
    ]
}

我有一個訂閱，它只返回 id 2 的更新結果。我如何更新對象數組而不遍歷整個數組？

我想要的是類似於下面的例子；

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

  updateArray(newitem){
    this.itemArray.items[newitem.id].name = newitem.name
  }

或者甚至更好，替換整個對象；

  updateArray(newitem){
    this.itemArray.items[newitem.id] = newitem
  }

但是，此示例根據數組的索引更新數組。 那么我該如何根據 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>

Answer 1

我根據您的示例創建了此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;
  }

希望這可以幫助。

Answer 2

直接更新作為參數傳遞的項目應該可以完成這項工作，但我可能在這里遺漏了什么？

updateItem(item){
  this.itemService.getUpdate(item.id)
  .subscribe(updatedItem => {
    item = updatedItem;
  });
}

編輯：如果您真的別無選擇，只能遍歷整個數組來更新您的項目，請使用 findIndex ：

let itemIndex = this.items.findIndex(item => item.id == retrievedItem.id);
this.items[itemIndex] = retrievedItem;

Answer 3

另一種方法可能是：

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;

Answer 4

你也可以試試這個來替換現有的對象

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;
          }
        });

Answer 5

我寧願創建一張地圖

export class item{
    name: string; 
    id: string
}

let caches = new Map<string, item>();

然后你可以簡單地

this.caches[newitem.id] = newitem; 

甚至

this.caches.set(newitem.id, newitem); 

數組是 1999 年。:)

Answer 6

嘗試Array.ForEach()方法。

itemArray.ForEach(item =>{
    if(item.id == newitem.id){
        item.name = newitem.name
    }
});

Answer 7

您可以使用 for 循環來查找您的元素並更新它：

updateItem(newItem){
  for (let i = 0; i < this.itemsArray.length; i++) {
      if(this.itemsArray[i].id == newItem.id){
        this.users[i] = newItem;
      }
    }
}

Answer 8

在 angular/typescript 中，我們可以避免數組中對象的突變。

使用您的項目 arr 作為 BehaviorSubject 的示例：

// you can initialize the items$ with the default array
this.items$ = new BehaviorSubject<any>([user1, user2, ...])

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

     // remove old item
     const items = this.items$.value.filter((item) => item.id !== newitem.id);

     // add a the newItem and broadcast a new table
     this.items$.next([...items, newItem])
   });
}

在模板中，您可以訂閱 items$

<tr *ngFor="let u of items$ | async; let i = index">
   <td>{{ u.id }}</td>
   <td>{{ u.name }}</td>
   <td>
        <input type="checkbox" checked="u.accepted" (click)="updateUser(u)">
        <label for="singleCheckbox-{{i}}"></label>
   </td>
</tr>

Answer 9

updateValue(data){    
     // retriving index from array
     let indexValue = this.items.indexOf(data);
    // changing specific element in array
     this.items[indexValue].isShow =  !this.items[indexValue].isShow;
}

Answer 10

我不明白為什么人們堅持“避免”循環，就像循環是一件壞事。 不要試圖“像酷男孩一樣”編寫代碼，請編寫以下代碼：

1-它是功能性的（它做了它應該做的事情）

2- 這是可以理解的（如果您需要更新一個集合，循環遍歷該集合有什么問題？這是這樣做的自然方式）。

3- 只有當前面的 2 個目標已經實現時，才嘗試使代碼最佳。 如果由於某種原因，最優代碼使它違反規則 1 或 2，則丟棄規則 3。

Answer 11

使用 map 和 spread 運算符之類的。

this.items$.next( [...this.items$.value.map( item=> item.id === id ? { ...item, name: 'other name'}: item )] );