web-dev-qa-db-fra.com

Détection de changement ne pas enregistrer les modifications de données

J'ai une structure HTML avec un composant à l'intérieur d'un composant (j'ai oublié le mot approprié).

travaillant fondamentalement comme ceci (largement simplifié):

html principal:

<div *ngFor="let item of data">
  <app-item [item]="item"></app-item>
</div>

<button (click)="addItem()">Add</button>

article html: 

<div>{{item.name}}</div>

<button (click)="deleteItem()">Delete</button>

À l'intérieur de l'application, j'affiche plusieurs éléments d'une liste. La liste récupère ses données directement de la base de données via une requête http.get.

Maintenant, j’ai également la possibilité d’ajouter ou de supprimer des éléments qui fonctionnent (les éléments sont ajoutés ou supprimés dans la base de données). Bien que la détection de modification ne la détecte pas et que le site doit être actualisé (via F5 par exemple) pour afficher les modifications.

J'ai vérifié le code (ce n'est pas tout de moi) et je n'ai trouvé aucune stratégie de détection de changement spécifiée.

J'ai également essayé d'activer manuellement la détection des modifications à l'aide de la fonction d'ajout et de suppression via ChangeDetectorRef (this.ref.detectChanges();). Cela n'empêchait pas non plus d'actualiser manuellement la page pour afficher les modifications.

Maintenant, qu'est-ce qui me manque pour la détection du changement? Ou bien, comment puis-je le déclencher manuellement dans mes méthodes d'ajout/suppression?

angularangular-http
5
m41n

Puisque vous ajoutez ou supprimez un élément dans un tableau existant, angular n’est pas en mesure de prendre en compte les modifications.

Pour que cela fonctionne, vous pouvez faire comme

  • attribue une référence à un tableau avec le nouvel objet des mêmes éléments de tableau que items= items.slice();
  • Ou vous pouvez utiliser la méthode Object.assign comme items= Object.assign([],items);
  • Les deux choses doivent être faites après avoir modifié le tableau.

Pour déclencher manuellement la détection de changement, vous pouvez suivre la réponse sur ce lien : -

Injectez ChangeDetectorRef dans votre composant, puis utilisez la méthode detectChanges() de cet objet pour déclencher la détection des modifications manuellement. Comme

constructure(private cd: ChangeDetectorRef()){}
someMethod(){
    cd.detectChanges();
}
7
Prathmesh Dali

Si vous utilisez un opérateur de diffusion au lieu de Push, cela devrait fonctionner.

this.data = [...this.data, newItem];

La raison en est que angular détecte un changement lorsque tout l'objet change ou que la référence change, de sorte qu'une mutation ne va pas le déclencher. Ainsi, plutôt que de muter le tableau, vous devez en faire un nouveau tableau. 

1
cpi

Ajouter ChangeDetectionStrategy ceci pourrait résoudre votre problème, mais en règle générale, il devrait être récupéré Angular pourrait être quelque chose d'autre qui aurait bogue votre code

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MovieComponent {
  // ...
}
0
Rahul Singh