Angular Ngrx v13通过Selector绑定Store变量到组件提示Observable无属性报错

报错原因 #

这个错误的根本原因是你在组件中定义的location$是Observable流类型，而非流 emit 出来的实际位置对象，Observable 本身不存在name属性，因此模板直接访问会触发类型报错。

解决方案 #

方案1：使用Angular内置async管道（最推荐） #

async管道会自动订阅Observable、接收流吐出的最新值，并且在组件销毁时自动取消订阅避免内存泄漏。
仅需修改模板对应代码即可：

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

代码中的?.是可选链运算符，用于避免流还未返回值时访问空对象属性导致的运行时报错。

方案2：组件内订阅流，存为普通变量 #

你也可以在TS文件中手动订阅Observable，将返回的位置对象存在普通变量中供模板访问，注意需要手动处理取消订阅逻辑：

// current-weather.component.ts
import { Subscription } from 'rxjs';

// 定义存储位置值的普通变量
location: any;
// 存储订阅引用用于销毁时取消
private locationSub: Subscription;

ngOnInit() {
  this.locationSub = this.store.pipe(select(CurrentLocationSelector)).subscribe(res => {
    this.location = res;
  })
}

ngOnDestroy() {
  // 组件销毁时取消订阅，避免内存泄漏
  this.locationSub?.unsubscribe();
}

模板中直接访问普通变量即可：

<span class="locationName">{{location?.name}}</span>

额外优化建议 #

• 你当前定义的getCurrentLocation选择器会将currentLocation转为Set再转回数组，如果你不小心调用了这个选择器会拿到数组类型的值，同样不存在name属性，注意区分两个选择器的使用场景。
• 建议给AppState中的currentLocation定义明确的类型而非any，可以提前规避很多类型错误，示例如下：

interface LocationInfo {
  name: string;
  // 补充其他你需要的字段
}
interface AppState{
  // ...其他字段不变
  currentLocation: LocationInfo;
  // ...其他字段不变
}

内容的提问来源于stack exchange，提问作者Gal Abitbul