typescript - Angular içinde nesne dizisindeki nesneyi güncelleme

Diyelim ki aşağıdaki nesne dizisine sahibim, buna itemArray diyelim;

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

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

Ve sadece id 2'nin güncellenmiş sonucunu döndüren bir aboneliğim var. Tüm diziye döngü uygulamadan nesne dizisini nasıl güncelleyebilirim?

İstediğim şey aşağıdaki örneğe benzer bir şey;

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

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

ya da daha da iyisi, tüm nesneyi değiştirmek;

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

Bu örnek, diziyi dizinin indeksine göre güncelliyor. Peki yeni öğe id'sine göre nasıl güncelleyebilirim?

Yorumda talep edilen şablon:

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

Cevap #1

Güncelleme :

  showUpdatedItem(newItem){
    let indexToUpdate = this.itemArray.items.findIndex(item => item.id === newItem.id);
    this.itemArray.items[indexToUpdate] = newItem;

   // some angular libraries require breaking the array reference
   // to pick up the update in the array and trigger change detection.
   // In that case, you can do following

   this.itemArray.items = Object.assign([], this.itemArray.items);
  }

Stackblitz Demo

Orijinal Yanıt:

Bu Plunker'ı, nesneyi newItem.id ile eşit olacak şekilde güncelleyen örneğiniz temel alarak oluşturdum

İşte fonksiyonlarımın bir kesiti:

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

Cevap #2

Argüman olarak geçirilen öğeyi doğrudan güncellemek işi görmeli, ama belki burada bir şeyi kaçırıyor olabilirim?

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

DÜZENLE : Eğer gerçekten öğenizi güncellemek için tüm dizinizde dolaşmaktan başka seçeneğiniz yoksa, findIndex kullanın :

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

Cevap #3

Başka bir yaklaşım şöyle olabilir:

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;

İlgili makaleler