使用 NGXS 选择器获取特定对象并在模板中使用它

Get specific object with the NGXS selector and use it in the template

我正在从 API 发送已保存的设置。一个设置有一个 'ID' 和几个对象,如 'numberOfUsers' 等。此外,我正在使用 NGXS 进行状态管理。
我只想获取 'numberOfUsers' 并在我的模板中使用它。但出于某种原因,我的订阅是 毫秒 未定义 并且没有数据(见图)。我也尝试过映射,但我真的不知道这里的最佳做法是什么以及如何在我的模板中获取数据。

这是我的代码:

@Select(SettingsState.getSettings)
settings$!: Observable<Settings[]>;

settingsChanged!: Settings[];

ngOnInit(): void {
  this.store.dispatch(new GetSettings(this.settingsId));

  this.settings$.subscribe((data: Settings[]) => {
        console.log('data', data);
        return this.settingsChanged = data;
      }
  );
}

console.log('settingsChanged', this.settingsChanged);

试试这个可能会有帮助!

Filter : 用于过滤空响应。

map: 用于只获取你想要的属性。

import { filter, map } from 'rxjs/operators';

this.settings$.pipe(map((data) => {
  if(data) {
  return {
    id: data.ID,
    attempts: data.numberOfUsers,
    key: data.others,
  }
  }}),
  filter(res => res && res != undefined)
  ).subscribe((data: any) => {
    console.log('data', data);
    alert(data.id);
    return this.settingsChanged = data;
  }
);

工作示例:link

祝你好运。