Estoy intentando mostrar algunas pestañas basadas en un bucle ngFor en la vista. Estoy cambiando constantemente la variedad de objetos para mostrar u ocultar pestañas. Pero algunas pestañas permanecen activas porque creo que los objetos dentro de la matriz no se actualizan.
La matriz se llama desde el servicio y se actualiza en el servicio desde diferentes componentes.
Aquí está el código:
html:
<kendo-tabstrip-tab *ngFor="let report of this.reportService.reportsSelectedService" [selected]="report.selected" >
<ng-template kendoTabTitle >
<span (click)='clickDetailReport()'>{{report.name}}</span>
<i (click)="onCloseReportDetail(report.name)" class="fa fa-times close-tab" aria-hidden="true"></i>
</ng-template>
<ng-template kendoTabContent *loadOnDemand>
<app-report-details [reportData]="report"></app-report-details>
</ng-template>
</kendo-tabstrip-tab>
componente.ts
redirect(name:string, url:string){
this.reportService.isReportsTabSelected = false;
let obj = {
name: name,
url: url,
selected: true
}
this.reportService.reportsSelectedService.forEach((item) => {
item.selected = false;
});
this.reportService.reportsSelectedService.push(obj);
}
He probado ChangeDetectorRef y trackBy: método personalizado
¿Alguna vez conseguiste que esto funcionara?
- David Brower
8 dic 2021 a las 15:23
------------------------------------
Este error está relacionado con la forma en que funciona ChangeDetectorRef, puedes ver más información aquí.
Estás mutando la matriz pero no estás actualizando la referencia a esa matriz. Eso significa que para Angular la matriz no cambió. Para evitar esto, necesita crear una nueva matriz y asignarla a la variable. Puedes utilizar el método del mapa para lograr esto:
redirect(name:string, url:string){
this.reportService.isReportsTabSelected = false;
let obj = {
name: name,
url: url,
selected: true
}
const newArray = this.reportService.reportsSelectedService.map((item) => {
item.selected = false;
return item;
});
newArray.push(obj);
this.reportService.reportsSelectedService = newArray;
}
1
Tengo el mismo resultado. Todavía no actualiza la vista.
-Nda.S
26/03/2021 a las 23:23
------------------------------------
Solo ChangeDetectorRef puede resolver esto.
Demostración funcional en StackBlitz.
Resultado de la demostración:
------------------------------------
this.titles = [...this.titles];
respondió
marzo 16,2022 a las 19:11
Tatyana Molchanova
Tatyana Molchanova
1,398
5
5 insignias de oro
12
12 insignias de plata
24
24 insignias de bronce
1
1
Simplemente, ¿puedes agregar más información y una explicación rápida?
-Elixir5
5 de septiembre de 2022 a las 14:22
