Tengo un modelo que es un elemento de matriz y su vista HTML correspondiente es la siguiente:
<div *ngIf="flag" > <table id="table" class="table table-hover table-bordered table-mc-light-blue"> <thead> <tr> <th>col 1</th> <th>col 2</th> <th>col 3</th> </tr> </thead> <tr *ngFor="let item of collection;"> <td>{{item.col1}}</td> <td> <input type="text" class="form-control" [(ngModel)]="item.col2" #input="ngModel" name="input-{{i}}"> </td> </tr> </table> </div>En algunas condiciones, estoy insertando nuevos elementos usando empalme. Encuentre el código a continuación
this.collection.splice(LastIndex, 0, ...newArray);El problema es que después de la inserción, los valores ngModel anteriores no se muestran para ciertos registros. Inspeccioné el elemento y encontré ng-reflect-model establecido en los valores anteriores, pero no pude ver los valores en los controles de entrada.
Lo hice funcionar modificando mi lógica de la siguiente manera:
let tempCollection = this.collection.slice(); //empty the list this.collection = []; this.changeDetectorRef.detectChanges(); //needed to reflect changes //insert elements in the list tempCollection.splice(LastIndex, 0, ...elements); //push once again to collection this.collection.push(...tempCollection);En lugar de manipular directamente la colección , la copié en la variable temporal llamada tempCollection para su manipulación y borré la variable de la colección .
Una vez que se realiza la manipulación, empujé tempCollection completo a la colección . Usé this.changeDetectorRef.detectChanges() para reflejar los cambios, una vez que había borrado la colección.