Angular 2 - Update * ngFor Tabelle nachdem Daten geändert wurden

Question

Normalerweise würde ich erwarten, dass dies in Echtzeit aktualisiert, aber es scheint nicht so zu sein. In meinem Winkel app habe ich ein Array, das einen String und ein anderes Array wie so speichert:

var myArray= [{id:"name1",array:{"id1", "id2"}] 

Und dann in meinem html habe ich eine Tabelle, die jedes Element in myArray in einer Reihe listet

<table *ngFor="item in myArray"> 
    <td>{{item.id}}</td> 
    <td>{{item.array}}</td> 
</table> 

Die Elemente in array werden in einer Funktion hinzugefügt, die an einen Tastenklick gebunden ist. So wählen die Benutzer aus einer Liste von Elementen, klicken Sie auf eine Schaltfläche, und diese Optionen werden an die array verschoben. Sie sind auch in der Lage zurückzugehen und einige dieser Einzelteile zu löschen, also addiere ich Code, um die Prüfung jedes Einzelteils in myArray zu behandeln, und wenn sein array dieses Einzelteil enthält, das gelöscht wurde, entfernt es es.

for(let i=0; i<myArray.length;i++) { 
    let row:any = myArray[i]; 
    for(let k=0; k<row.array.length;k++) { 
    if(row.array[k] == deletedItem) { 
     row.array.splice(index, 1); 
    } 
    } 
} 

Der Code funktioniert, indem Konsolenprotokolle ich in der Lage bin, um zu sehen, dass die deletedItem von jedem Punkt in myArray ‚s array entfernt (sorry für die verwirrenden Variablennamen!). Die Tabelle spiegelt jedoch nicht die aktualisierten Werte wider, auch wenn myArray beim Senden oder Drucken an die Konsole angezeigt wird. Muss ich den Tisch auffrischen? Ich dachte, es sollte automatisch aktualisiert werden, da die Daten gebunden sind.

Answer 1

Von diesem Code glaube ich, dass Sie kein Element aus myArray, sondern aus der lokalen Variablenzeile löschen. Aus diesem Grund sehen Sie in Ihrer Vorlage keine Änderung.

Versuchen mit diesem:

for(let i=0; i<myArray.length;i++) { 
    let row:any = myArray[i]; 
    for(let k=0; k<row.array.length;k++) { 
    if(row.array[k] == deletedItem) { 
     myArray[i].array.splice(k, 1); 
    } 
    } 
}