Angulaire de la mise à jour de l'objet dans l'objet array

Dire que j'ai la suite du tableau d'objets, permet de le nom il itemArray;

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

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

Et j'ai un abonnement qui renvoie le résultat mis à jour de seulement 2 de code. Comment puis-je mettre à jour le tableau d'objets sans boucle à travers l'ensemble de la matrice?

Ce que je voudrais, c'est quelque chose comme l'exemple ci-dessous;

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

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

ou encore mieux, en remplacement de la totalité de l'objet;

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

Cet exemple cependant les mises à jour de la matrice en fonction de l'indice du tableau. Alors, comment puis-je mettre à jour basé sur newitem.id?

Modèle demandé en commentaire:

<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>
Êtes-vous à l'aide de cet objet pour le rendu de la sortie à partir d'une boucle sur cette itemArray (id 2)? Ce que je suis, pourriez-vous écrire une tuyauterie sur mesure pour ce filtre?
"Cet exemple cependant les mises à jour de la matrice en fonction de l'indice du tableau. Alors, comment puis-je mettre à jour basé sur newitem.id?". Pourquoi ne voulez-vous pas mettre à jour un élément à partir d'un index? Il sera certainement plus rapide que la boucle de la matrice de la recherche de l'id...
la mise à jour de l'index serait bien. Comment trouver le bon indice? Maintenant, l'indice ne correspond pas à la newitem.id
bien que ce soit une réponse à partir du back-end, il n'a pas l'index. Pourrais-je recherche de l'indice basé sur la newitem.id.itemArray.articles?
Pouvez-vous inclure votre modèle en question?

OriginalL'auteur phicon | 2017-05-22

  1. 34

    J'ai créé ce Plunker basé sur votre exemple que les mises à jour de l'objet est égale à newItem.id

    Voici l'extrait de ma fonctions:

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

    Espère que cette aide.

    Mineur faute de frappe à la fin de la deuxième ligne. )); devrait être );
    excellent! une partie seulement, je suis confus sur la façon d'actualiser le tableau sur l'écran.
    Bonne réponse, mais peut être réduite en utilisant findIndex à la place.
    Merci De Nahal. J'ai utilisé votre code ici - stackblitz.com/edit/angular-item-edit-jk7b9k

    OriginalL'auteur Nehal

  2. 18

    La mise à jour directement l'élément passé en argument devrait faire le travail, mais je suis peut-être manqué quelque chose ?

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

    EDIT : Si vraiment vous n'avez pas le choix, mais d'une boucle sur l'ensemble de votre tableau de mise à jour de votre article, utiliser findIndex :

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

    OriginalL'auteur Eld0w

  3. 5

    Vous pouvez l'essayer aussi de remplacer un objet existant

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

    OriginalL'auteur Vishnu Sharma

  4. 4

    Une autre approche pourrait être:

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

myList.find(iitem => item.id == itemUpdated.id).name = itemUpdated.name;

    OriginalL'auteur Pedro Benevides

  5. 3

    Je préfère créer une carte

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

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

    et alors vous pouvez simplement

    this.caches[newitem.id] = newitem;

    même

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

    tableau est donc de 1999. 🙂

    OriginalL'auteur sowen

  6. 0

    Vous pouvez utiliser la boucle for pour trouver votre élément et de le mettre à jour:

    updateItem(newItem){
  for (let i = 0; i < this.itemsArray.length; i++) {
      if(this.itemsArray[i].id == newItem.id){
        this.users[i] = newItem;
      }
    }
}
    Vous pouvez simplement utiliser this.users.push( itemsArray.find( el => el.id == newItem.id ) )

    OriginalL'auteur Dositej Grbović