將變量從商店綁定到 angular ngrx 中的組件

Question

我試圖通過 angular 中帶有 ngrx v13 的選擇器將組件中的位置變量綁定到商店中的另一個變量，但是當我將帶有屬性的變量放在 HTML 中時，出現錯誤：

錯誤消息：“可觀察”類型上不存在屬性“名稱”

那是我的代碼：

應用程序選擇器.ts

import { createSelector } from "@ngrx/store";

export const CurrentLocationSelector=(state:AppState) => state.currentLocation;
export const getCurrentLocation = createSelector(
    CurrentLocationSelector,
    (currentLocation: any) => {
      return [...new Set(currentLocation)];
    }
);

那是我的 AppState：

interface AppState{
    darktheme:boolean;
    temperatureUnit:string;
    currentLocation:any; // object with the current location
    locationAutoComplete:any[]; // array that contains the result from the autocomplete
    locationCurrentWeather:CurrentItem | null;
    Forecast5Days:ForecastItem[];
    Favorites:FavoriteItem[];
    loading:boolean;
    getData:boolean;
}

在我的組件中，我寫道： current-weather.component.html

         <div class="left">
             <span class="locationName">{{location$.name}}</span>
             <span class="date">{{currentFullDate}}</span>
             <div class="weatherDescription">
                 <img [src]="imageCurrentWeather" class="weatherIcon">
                 <div class="weatherText">{{CurrentWeather.WeatherText}}</div>
             </div>
             <h1 [innerHTML]="CurrentWeather.Temperature + ' ' + currentUnit"></h1>
         </div>

在我的current-weather.component.ts中我寫了

  location$ = this.store.pipe(select(CurrentLocationSelector))

Answer 1

所以這里的問題是您將變量location$分配為observable 。 這意味着它不是代表您的數據的單個 object，而是可以在任何時間點代表您的數據的多個值的集合。 將其視為數據的 stream。

這意味着您需要獲取給定點的 object 的值——通常是當前時間點。 為此，請在其上調用.subscribe()以收聽傳入的 observables 和.select以通過以下方式收聽包含您想要的數據的特定選擇器：

在您的current-weather.component.ts文件中：

let $location;
this.store.select(CurrentLocationSelector).subscribe(location => {
  $location = location; // put a debug break point here to see your value get updated
});

Answer 2

您可以使用異步 pipe 因為 location$ 是可觀察的。

<span class="locationName">{{(location$ | async).name}}</span>

當前天氣.component.html

     <div class="left">
         <span class="locationName">{{(location$ | async).name}}/span>
         <span class="date">{{currentFullDate}}</span>
         <div class="weatherDescription">
             <img [src]="imageCurrentWeather" class="weatherIcon">
             <div class="weatherText">{{CurrentWeather.WeatherText}}</div>
         </div>
         <h1 [innerHTML]="CurrentWeather.Temperature + ' ' + currentUnit"></h1>
     </div>

異步參考 pipe

Answer 3

你實際上翻轉了 .pipe 和 select ：

嘗試這個：

this.location$ = this.store.select(CurrentLocationSelector).pipe(map((location)=> {return location;}))

如果問題仍然存在，那么很可能是因為選擇器，我建議使用 createFeatureSelector：

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { AppState } from './app.state';
export const APP_STATE_NAME = 'app';

const getAppState =
  createFeatureSelector<AppState>(APP_STATE_NAME);

export const getLocation = createSelector(getAppState, (state) => {
  return state.currentLocation;
});