将变量从商店绑定到角度ngrx中的组件

Posted 2023-02-19

【中文标题】将变量从商店绑定到角度ngrx中的组件

【英文标题】：bind variables from store to component in angular ngrx

【发布时间】：2022-01-06 18:17:36

【问题描述】：

我正在尝试通过选择器将组件中的位置变量绑定到商店中的另一个变量，其中 ngrx v13 有角度，但是当我将带有属性的变量放入 html 中时出现错误：

错误消息：“可观察”类型上不存在属性“名称”

这是我的代码：

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)];
    
);

那是我的 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))

【参考方案1】：

所以这里的问题是您将变量location$ 分配为observable。这意味着它不是代表您的数据的单个对象，而是可以在任何时间点代表您的数据的多个值的集合。将其视为数据流。

这意味着您需要在给定点获取对象的值——通常是当前时间点。为此，请在其上调用 .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
);

【讨论】：

我已经尝试过了，但是如果我订阅了，即使我更新了商店中的位置，我也会得到一个没有值的空数组。

您如何更新您的商店？如果正确更新，您应该能够使用this extension 在任何给定点查看您商店中的值。

【参考方案2】：

您可以使用异步管道，因为 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>

Reference for async pipe