Variables vinculadas de la tienda al componente en Angular ngrx
Estoy intentando vincular la variable de ubicación en el componente con otra variable en la tienda a través del selector con ngrx v13 en Angular, pero cuando coloco la variable con la propiedad en HTML, obtengo un error:
Mensaje de error: La propiedad ‘nombre’ no existe en el tipo ‘Observable
Este es mi código:
app.selector.ts
import { createSelector } from “@ngrx/store”;
export const CurrentLocationSelector=(state:AppState) => state.currentLocation;
export const getCurrentLocation = createSelector(
CurrentLocationSelector,
(currentLocation: any) => {
return […new Set(currentLocation)];
}
);
Este es mi AppState:
interface AppState{
darktheme:boolean;
temperatureUnit:string;
currentLocation:any; // objeto con la ubicación actual
locationAutoComplete:any[]; // array que contiene el resultado del autocompletado
locationCurrentWeather:CurrentItem | null;
Forecast5Days:ForecastItem[];
Favorites:FavoriteItem[];
loading:boolean;
getData:boolean;
}
En mi componente escribí:
current-weather.component.html
<div class="izquierda">
<span class="locationName">{{location$.name}}</span>
<span class="fecha">{{currentFullDate}}</span>
<div class="weatherDescription">
<img [src]="imageCurrentWeather" class="weatherIcon">
<div class="weatherText">{{CurrentWeather.WeatherText}}</div>
</div>
<h1 [innerhtml]="CurrentWeather.Temperature + ' ' + currentUnit"></h1>
</div>
En mi current-weather.component.ts, escribí:
location$ = this.store.pipe(select(CurrentLocationSelector))
davy.ai
El mensaje de error “Property ‘name’ does not exist on type ‘Observable‘” indica que la variable ‘location$’ en su componente es un Observable y no un objeto con una propiedad ‘name’. Para resolver esto, puede usar el operador async en su HTML para suscribirse al Observable y obtener el valor de la propiedad ‘name’:
current-weather.component.html
Tenga en cuenta el uso del operador ‘?’ para manejar la posibilidad de que el Observable sea nulo o no definido. Esto asegura que el error no ocurrirá.
Además, según su selector, no está claro si la propiedad ‘currentLocation’ en su almacenamiento es un objeto con una propiedad ‘name’ o un conjunto de objetos. Si es un objeto, no necesita usar el método ‘new Set’ en su selector. Simplemente puede devolver el objeto en sí:
app.selector.ts
Si es una matriz de objetos, entonces tiene sentido usar el método ‘new Set’ para filtrar los duplicados. Sin embargo, es posible que desee modificar su selector para devolver el primer elemento de la matriz en lugar de una matriz con un elemento:
app.selector.ts
Esto asegura que obtenga un objeto con una propiedad ‘name’ en lugar de una matriz con un objeto.