Angular17+NgRx：如何用Async管道访问并显示Store状态属性

问题现象 #

使用Angular 17独立组件结合NgRx实现计数器功能时，NgRx DevTools显示Store状态正常，但通过Async管道无法正确获取并显示counter属性：

• 直接绑定Observable时，页面显示整个状态对象
• 尝试访问.counter属性时触发类型错误，提示number类型无counter属性

问题根源 #

你的Store根状态结构为{ counter: CounterState }（在provideStore中注册的是{ counter: CounterReducer }），但组件中错误地将Store的类型声明为Store<CounterState>，导致store.select("counter")被推断为返回Observable<number>（因为CounterState接口内的counter字段是number类型），但实际它返回的是完整的CounterState对象。这种类型不匹配引发了模板中的错误。

解决方法 #

方法一：修正Store根状态类型声明

1. 在counter.reducer.ts中添加根状态接口，明确整个Store的结构：

import { createReducer, on } from '@ngrx/store';
import { plus, minus, reset } from './counter.actions';

export interface CounterState{
  counter: number;
};

// 新增根状态接口
export interface AppState {
  counter: CounterState;
}

export const initialState: CounterState = {
  counter: 0
};

export const CounterReducer = createReducer(
  initialState,
  on(plus, (state) => ( {...state, counter: state.counter + 1}) ),
  on(minus, (state) => ( {counter: state.counter - 1}) ),
  on(reset, (state) => ({counter: 0})),
);

2. 修改组件中的Store注入类型：

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { AppState, CounterState } from '../counter.reducer';
import { minus, plus, reset } from '../counter.actions';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'counter',
  standalone: true,
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
  imports: [CommonModule],
})
export class Counter {
  counterFinal$: Observable<CounterState>;
  
  constructor(private store: Store<AppState>) {
    this.counterFinal$ = this.store.select("counter");
  }

  plus() {
    this.store.dispatch(plus());
  }

  minus() {
    this.store.dispatch(minus());
  }

  reset() {
    this.store.dispatch(reset());
  }
}

3. 模板中使用安全导航操作符访问属性：

<div>Counτer : {{ (counterFinal$ | async)?.counter }}</div>
<button id="plus" (click)="plus()">+</button>
<button id="minus" (click)="minus()">-</button>
<button id="reset" (click)="reset()">Reset</button>

方法二：使用NgRx选择器（推荐，更符合规范）

1. 在counter.reducer.ts中创建专用选择器：

import { createReducer, on, createFeatureSelector, createSelector } from '@ngrx/store';
import { plus, minus, reset } from './counter.actions';

export interface CounterState{
  counter: number;
};

export const initialState: CounterState = {
  counter: 0
};

export const CounterReducer = createReducer(
  initialState,
  on(plus, (state) => ( {...state, counter: state.counter + 1}) ),
  on(minus, (state) => ( {counter: state.counter - 1}) ),
  on(reset, (state) => ({counter: 0})),
);

// 创建选择器获取counter切片
export const selectCounterState = createFeatureSelector<CounterState>('counter');
// 创建选择器直接获取counter数值
export const selectCounterValue = createSelector(
  selectCounterState,
  (state) => state.counter
);

2. 组件中调用选择器：

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { selectCounterValue } from '../counter.reducer';
import { minus, plus, reset } from '../counter.actions';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'counter',
  standalone: true,
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
  imports: [CommonModule],
})
export class Counter {
  counterFinal$: Observable<number>;
  
  constructor(private store: Store) {
    this.counterFinal$ = this.store.select(selectCounterValue);
  }

  plus() {
    this.store.dispatch(plus());
  }

  minus() {
    this.store.dispatch(minus());
  }

  reset() {
    this.store.dispatch(reset());
  }
}

3. 模板直接绑定数值：

<div>Counτer : {{ counterFinal$ | async }}</div>
<button id="plus" (click)="plus()">+</button>
<button id="minus" (click)="minus()">-</button>
<button id="reset" (click)="reset()">Reset</button>

方法三：使用RxJS map操作符提取数值

无需修改类型或创建选择器，直接通过map操作从状态对象中提取counter值：

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { CounterState } from '../counter.reducer';
import { minus, plus, reset } from '../counter.actions';
import { Observable, map } from 'rxjs';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'counter',
  standalone: true,
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css'],
  imports: [CommonModule],
})
export class Counter {
  counterFinal$: Observable<number>;
  
  constructor(private store: Store) {
    this.counterFinal$ = this.store.select("counter").pipe(
      map((state: CounterState) => state.counter)
    );
  }

  plus() {
    this.store.dispatch(plus());
  }

  minus() {
    this.store.dispatch(minus());
  }

  reset() {
    this.store.dispatch(reset());
  }
}

模板直接绑定即可：

<div>Counτer : {{ counterFinal$ | async }}</div>
<button id="plus" (click)="plus()">+</button>
<button id="minus" (click)="minus()">-</button>
<button id="reset" (click)="reset()">Reset</button>

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