typescript - Angular 17: NG0100 en nuevos flujos de control

Hace unas semanas migramos nuestra aplicación Angular a Angular 17. Mientras hacíamos eso, también utilizamos el comando de Angular CLI para cambiar todos los flujos de control a los nuevos flujos de control integrados. Esto funcionó bien y, a primera vista, todo funciona como antes.

Sin embargo, hace unos días me encontré con un "NG0100: La expresión ha cambiado después de que fue verificada" donde no había ningún error antes del cambio. Y estoy luchando por encontrar una solución para eso.

Lo que tenemos es un componente con un BehaviorSubject. Este BehaviorSubject se utiliza en los componentes hijos para proporcionar información sobre su estado de carga al componente padre. En el HTML, esto se ve así:

@if (childComponentLoadingState$ | async; as childComponentLoadingState) {
  ...
  
  <mat-stepper linear #myStepper>
    <mat-step [completed]="isFirstStepCompleted(childComponentLoadingState)">
      ...
      <my-child-component [componentLoadingState$]="childComponentLoadingState$">
      </my-child-component>
      ...
    </mat-step> 
    ...
  </mat-stepper>

  ...
}

Mientras usábamos *ngIf, esto funcionaba bien y no obteníamos ningún error. Ahora, en la implementación proporcionada, obtenemos un "NG0100: La expresión ha cambiado después de haber sido verificada" en la línea de la etiqueta mat-step.

¿Alguien tiene alguna idea de por qué hay un error ahora y cómo podemos solucionarlo? ¡Gracias por tu ayuda! :)

Respuesta #1

Primero que nada, los nuevos flujos de control de Angular están en vista previa para desarrolladores y, por lo tanto, no son flujos de control estables. Ahora, si deseas trabajar con los flujos de control experimentales, NG0100 tiene que ver con la detección de cambios; sin conocer tu código, sugeriría lo siguiente:

1. detectar cambios manualmente después de que se haya verificado el contenido
2. usa los operadores de RXJS en tu sujeto para detectChanges, por ejemplo pipe y tap
3. vuelve a la directiva *ngIf ya que resuelve tu problema y es estable

import { ChangeDetectorRef } from '@angular/core';
    
constructor( private cdr: ChangeDetectorRef ) {}   
    
ngAfterContentChecked() {
    this.cdr.detectChanges();
}