Tengo un problema con la detección de cambios de Angular 11 en este caso:

Tengo un mapa y lo itero en la plantilla usando la canalización de valores clave y una devolución de llamada adicional para obtener el orden original del mapa y no ordenado por clave.

Pero cuando cambio este mapa, la detección de cambios no hace nada.

Sé que la tubería de valores clave genera una nueva matriz completa. Por lo tanto, está claro que cambiar las referencias en el mapa no activará la detección del cambio. Pero ¿por qué no cambiar el Mapa completo?

Aquí hay algo de código:

Modelo:

 <ng-container *ngFor="let postMap of mappingMap.events | keyvalue: originalOrder; let i = index"> <ion-slide *ngIf="!postMap.value.isHiddenByFilter" (click)="showSlideActionSheet('events', postMap.key)" class="overview-slide" >

Componente:

 interface MappingMapvalue { isHiddenByFilter: boolean; sliderIndex: number; } mappingMap: Map<number, MappingMapvalue>; pseudyfunction(cpt: string): void { let newMap: any; posts: .................... newMap = [...this.mappingMap[cpt].entries()].sort((a, b) => posts[a[0]][key].toLowerCase() > posts[b[0]][key].toLowerCase() ? 1 : posts[b[0]][key].toLowerCase() > posts[a[0]][key].toLowerCase() ? -1 : 0 ); this.mappingMap[cpt] = new Map(newMap); // Why no change detection here? This is a complete new Map! Same properties but another order } originalOrder = (a: KeyValue<number,MappingMapvalue>, b: KeyValue<number,MappingMapvalue>): number => 0;

¿Alguien puede explicar por qué la detección de cambios no se activa cuando el mapa se inicializa por primera vez?

Los disparadores de detección de cambios, si hago esto:

 const newMap2 = new Map(); newMap2.set(700, {isHiddenByFilter: true, sliderIndex: 0}); this.mappingMap[cpt] = newMap2;

Pero ¿por qué entonces y no en cambiar el mapa completo?

Una pregunta adicional es:

Esto no activa la detección de cambios:

 this.mappingMap[cpt] = new Map(newMap); this.mappingMap[cpt].set('newdummyfield', {isHiddenByFilter: true, sliderIndex: undefined}); this.mappingMap[cpt].delete('newdummyfield');

Pero esto lo desencadena: (Esto no tiene sentido en el escenario, pero quería probarlo)

 this.mappingMap[cpt] = new Map(newMap); this.mappingMap[cpt].set('newdummyfield', {isHiddenByFilter: true, sliderIndex: undefined}); setTimeout(() => { this.mappingMap[cpt].delete('newdummyfield'); });

¿La detección de cambios espera el código síncrono completo? ¿Es este el comportamiento habitual de la detección de cambios?