Angular中通过ID从NgRedux Store选取元素的实现问题

你的思路方向是对的，但问题出在RxJS操作符的使用和数据流的组合方式上，我来一步步帮你修正：

先分析你原来代码的问题 #

1. 你误用了RxJS的find操作符：ngRedux.select()返回的是Observable<Property[]>（数组的可观察对象），而RxJS的find是用来查找流中的单个值，不是数组里的元素。你需要先用map操作符拿到数组，再用数组原生的find方法。
2. 路由参数id是字符串类型，但你的_id是数字，全等比较会失败，需要做类型转换。
3. 使用route.snapshot只能获取初始化时的路由参数，如果用户在同一路由下切换ID（比如从/property/123跳转到/property/456），snapshot不会更新，必须监听路由参数的变化流。

正确实现方案（分两种场景） #

场景1：模板中直接使用（无需手动订阅）

如果只是在模板中展示数据，推荐用async管道自动管理订阅，无需手动写subscribe：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NgRedux } from '@angular-redux/store';
import { combineLatest, Observable } from 'rxjs';
import { map, distinctUntilChanged } from 'rxjs/operators';

@Component({
  template: `
    <div *ngIf="property$ | async as property">
      <h1>{{ property.name }}</h1>
    </div>
  `
})
export class PropertyDetailComponent implements OnInit {
  property$: Observable<any>;

  constructor(
    private route: ActivatedRoute,
    private ngRedux: NgRedux<any>
  ) {}

  ngOnInit(): void {
    // 监听路由ID的变化流
    const routeId$ = this.route.paramMap.pipe(
      map(paramMap => paramMap.get('id')),
      distinctUntilChanged() // 避免ID重复时重复计算
    );

    // 从Redux获取properties数组的可观察对象
    const properties$ = this.ngRedux.select(state => state.properties);

    // 组合两个流，实时匹配对应ID的property
    this.property$ = combineLatest([routeId$, properties$]).pipe(
      map(([id, properties]) => {
        // 把字符串ID转为数字，和Redux中的_id匹配
        return properties.find(property => property._id === Number(id));
      })
    );
  }
}

场景2：初始化响应式表单（需要订阅更新表单）

如果要给响应式表单赋值，我们需要手动订阅，但要用takeUntil管理订阅避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { NgRedux } from '@angular-redux/store';
import { combineLatest, Subject } from 'rxjs';
import { map, distinctUntilChanged, takeUntil } from 'rxjs/operators';

@Component({
  // 你的组件模板
})
export class PropertyDetailComponent implements OnInit, OnDestroy {
  propertyForm: FormGroup;
  // 用于销毁订阅的信号
  private destroy$ = new Subject<void>();

  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private ngRedux: NgRedux<any>
  ) {
    // 初始化表单
    this.propertyForm = this.fb.group({
      name: ['']
      // 其他表单字段
    });
  }

  ngOnInit(): void {
    const routeId$ = this.route.paramMap.pipe(
      map(paramMap => paramMap.get('id')),
      distinctUntilChanged()
    );

    const properties$ = this.ngRedux.select(state => state.properties);

    combineLatest([routeId$, properties$]).pipe(
      map(([id, properties]) => properties.find(p => p._id === Number(id))),
      takeUntil(this.destroy$) // 组件销毁时自动取消订阅
    ).subscribe(property => {
      if (property) {
        // 用匹配到的property更新表单
        this.propertyForm.patchValue(property);
      }
    });
  }

  ngOnDestroy(): void {
    // 发送销毁信号
    this.destroy$.next();
    this.destroy$.complete();
  }
}

核心思路总结 #

1. 不要用路由快照：监听route.paramMap的可观察对象，确保路由参数变化时能实时响应。
2. 组合数据流：用combineLatest把路由ID流和Redux状态流结合，只要其中一个流变化，就重新计算匹配的property。
3. 类型转换：路由参数是字符串，必须转为和Redux中_id一致的类型（数字）才能正确匹配。
4. 订阅管理：用async管道或takeUntil管理订阅，避免内存泄漏。

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