web-dev-qa-db-fra.com

Angular2: * ngFor ne se met pas à jour lorsque le tableau est mis à jour

J'ai un tableau d'objets (appelons-le arr). Dans l'une des entrées de mon composant dans la méthode (change), je modifie l'un des attributs de ces objets, mais dans la vue (*ngFor) rien ne change. J'ai lu que la détection de changement Angular2 ne vérifie pas le contenu des tableaux ou des objets, j'ai donc essayé ceci:

this.arr = this.arr.slice();

et

this.arr = [...this.arr];

Mais la vue ne change pas, elle affiche toujours l'ancien attribut. Dans la méthode (change) avec console.log(), j'ai le tableau correct. Bizarre, mais celui-ci fonctionne: this.arr = []; J'ai aussi essayé NgZone et markForCheck().

angularangular2-changedetection
8
Roland Rácz

Essayez de créer une copie en profondeur en faisant

this.arr = Object.assign({}, NEW_VALUE);
3
Eun Leem
  1. Vérifiez si votre composant est configuré avec changeDetection: cHangeDetectionStrategy.OnPush, si vous y allez, vous devez appeler changeDetectorRef.markForCheck ()
  2. Vous pouvez également implémenter le hook onChange Lifecycle et modifier les valeurs du tableau dans cette fonction.
3
Rohan Fating

J'ai résolu cette erreur en ajoutant une directive changDetection sur @component comme suit

    @Component({
      selector: 'app-page',
      templateUrl: './page.component.html',
      styleUrls: ['./page.component.scss'],
      changeDetection: ChangeDetectionStrategy.Default
    })

Vous devez également l'importer

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

Il y a deux stratégies onPush et Default

OnPush utilise la stratégie CheckOnce, ce qui signifie que la détection automatique des modifications est désactivée jusqu'à sa réactivation en définissant la stratégie sur Par défaut (CheckAlways). La détection de changement peut toujours être explicitement invoquée.

alors que Default utilise la stratégie CheckAlways, dans laquelle la détection des modifications est automatique jusqu'à ce qu'elle soit explicitement désactivée.

Source Docs

1
Felix Runye