es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo acceder a una propiedad anidada desde un observable de selector de ngrx?

Definición de Datos Iniciales e Interfaz:

export interface IInitialData {
    version: {
        patch?: string;
        Version: string,
        build: number,
    };
}

export const initialStateInitialData = {
    version: {
        build: 0,
        Version: '1',
    },
};

Tengo los siguientes selectores en el archivo de selectores:

export const selectInitialDataFeature = createFeatureSelector<iinitialdata>('initialData');

export const selectInitialData = createSelector(
    selectInitialDataFeature,
    initialData => {
        return initialData;
    },
);

export const selectInitialDataVersion = createSelector(
    selectInitialData,
    initialData => {
        return initialData.version.Version;
    },
);

Accediendo al segundo desde el archivo de componentes:

public version$ = this.store.select(selectInitialDataVersion);

Y desde el archivo de plantilla:

[value]="version$ | async"

Esto funciona bien.

Sin embargo, lo siguiente devuelve el error “Variable no resuelta version”:

public initialData$ = this.store.select(selectInitialData);
[value]="initialData$.version.Version | async"`

¿Cómo puedo acceder a la variable version.Version de esta manera?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    El error “Variable no resuelta versión” se produce porque el selector initialData$ devuelve un objeto de tipo IInitialData, y estás intentando acceder directamente a la propiedad version.Version en el template. Para solucionar esto, puedes actualizar tu código de template para que primero use el pipe async para suscribirse al observable initialData$ y luego acceder a la propiedad version.Version:

    <span *ngif="(initialData$ | async) as initialData">{{ initialData.version.Version }}</span>
    

    Aquí, el pipe async se suscribe al observable initialData$ y produce el valor emitido como initialData. Luego, la expresión {{ initialData.version.Version }} accede a la propiedad version.Version en el objeto initialData. La directiva estructural *ngIf se agrega para asegurarse de que el template solo muestre el elemento span cuando initialData$ haya emitido un valor.

Comments are closed.