web-dev-qa-db-de.com

Änderungserkennung erfasst keine Datenänderungen

Ich habe eine HTML-Struktur mit einer Komponente innerhalb einer Komponente (das richtige Word dafür vergessen).

grundsätzlich so arbeiten (weitgehend vereinfacht):

haupt-HTML:

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

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

item html: 

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

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

innerhalb des App-Elements zeige ich mehrere Elemente aus einer Liste an. Die Liste erhält ihre Daten über eine http.get-Anforderung direkt aus der Datenbank.

Jetzt habe ich auch Funktionen zum Hinzufügen oder Löschen von Elementen, die beide funktionieren (Elemente werden der Datenbank hinzugefügt bzw. aus ihr entfernt). Die Änderungserkennung erfasst jedoch nichts davon und die Site muss aktualisiert werden (z. B. über F5), um die Änderungen anzuzeigen.

Ich habe den Code überprüft (nicht alles ist von mir) und konnte keine Änderungserkennungsstrategie finden.

Ich habe auch versucht, die Änderungserkennung manuell über die ChangeDetectorRef-Funktion (this.ref.detectChanges();) aus der Add- und Delete-Funktion auszulösen. Dies hat jedoch auch nicht die Notwendigkeit beseitigt, die Seite manuell zu aktualisieren, um die Änderungen zu sehen.

Nun, was fehlt mir für die Änderungserkennung, um dies aufzuheben? Oder wie kann ich es manuell innerhalb meiner Add/Delete-Methoden auslösen?

5
m41n

Da Sie ein Element in einem vorhandenen Array hinzufügen oder löschen, kann Angular die Änderungen nicht auswählen.

Damit dies funktioniert, können Sie es gerne tun

  • array-Referenz mit neuem Objekt derselben Array-Elemente wie items= items.slice(); zuweisen
  • Oder Sie können die Object.assign-Methode als items= Object.assign([],items); verwenden.
  • Beide Dinge sollten nach dem Ändern des Arrays ausgeführt werden.

Um die Änderungserkennung manuell auszulösen, können Sie answer über diesen Link folgen: -

Fügen Sie ChangeDetectorRef in Ihre Komponente ein und verwenden Sie dann die detectChanges()-Methode dieses Objekts, um die Änderungserkennung manuell auszulösen. Mögen

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

Wenn Sie anstelle von Push einen Spread-Operator verwenden, sollte dies funktionieren.

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

Der Grund dafür ist, dass der Winkel eine Änderung erkennt, wenn sich das gesamte Objekt oder die Referenz ändert, sodass eine Mutation sie nicht auslöst. Anstatt das Array zu mutieren, müssen Sie es zu einem neuen Array machen. 

1
cpi

Fügen Sie ChangeDetectionStrategy hinzu. Dies könnte Ihr Problem lösen, aber in der Regel sollte Angular etwas anderes sein, was Ihren Code stört

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