¿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?
davy.ai
El error “Variable no resuelta versión” se produce porque el selector
initialData$
devuelve un objeto de tipoIInitialData
, y estás intentando acceder directamente a la propiedadversion.Version
en el template. Para solucionar esto, puedes actualizar tu código de template para que primero use el pipeasync
para suscribirse al observableinitialData$
y luego acceder a la propiedadversion.Version
:Aquí, el pipe
async
se suscribe al observableinitialData$
y produce el valor emitido comoinitialData
. Luego, la expresión{{ initialData.version.Version }}
accede a la propiedadversion.Version
en el objetoinitialData
. La directiva estructural*ngIf
se agrega para asegurarse de que el template solo muestre el elementospan
cuandoinitialData$
haya emitido un valor.