使用 NGXS 调用 API-data 并将其设置在表单元素中

如何解决使用 NGXS 调用 API-data 并将其设置在表单元素中

我有一个包含一些数据的 API。我正在从这个 API 成功获取数据。模板中的 Angular 异步 PIPE 有效。但我想直接在我的表单而不是模板中设置来自 API 的数据。目前我将默认值用于测试目的。
我留意了 Angular Docs 中的一个示例，并在谷歌上搜索了很多，但找不到任何示例。我在严格模式下使用 Angular。

代码如下：

组件：

settingsForm!: FormGroup;

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

fooSettings: Settings;

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

    this.settings$.subscribe(((settings: Settings[]) => {
      this.fooSettings = DEFAULT_SETTINGS; // have to set default values. without the default values it does not work

      this.fooSettings = settings.find((filteredSettings: Settings) => {
        return filteredSettings.id === '222'; // I only want to get the data with the id 222. This part does not work as expected
      });
    }));
}

initForm(): void {
    const validations = [
        Validators.required,Validators.maxLength(2)
    ];

    this.settingsForm = this.formBuilder.group({
      players: [DEFAULT_SETTINGS.playerNames.length,validations],// I want to replace the DEFAULT_SETTINGS with the settings from the api
      rounds: [DEFAULT_SETTINGS.numberOfRounds,});
  }

settings.state.ts：

@Selector()
static getSettings(state: SettingsstateModel): Settings[] {
    return state.settings;
}

@Action(GetSettings)
getSettings({ getState,setState }: StateContext<SettingsstateModel>,{ id }: GetSettings): Observable<Settings[]> {
    return this.settingsService.getSettings(id).pipe(
        tap(result => {
            const state = getState();
            setState({
                ...state,settings: result,});
        }));
}

settings.model.ts：

export interface Settings {
  id: string;
  playerNames: Player[];
  numberOfRounds: number;
}

解决方法

您可能想尝试这些方法 - 在加载设置之前不要创建表单。

settingsForm!: FormGroup;

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

fooSettings: Settings;

ngOnInit(): void {
    
    // Kick off call to load the settings
    this.store.dispatch(new GetSettings('222'));

    const validations = [
        Validators.required,Validators.maxLength(2)
    ]; 

    // When the settings state is updated via the API call,then get that setting 
    // entry and load it into the form.
    this.settings$.pipe(
     map(settings => settings.find(x => x.id === '222')),filter(setting => !setting),tap((setting: Settings) => {
      // Build the form from the loaded settings
      this.settingsForm = this.formBuilder.group({
          players: [setting.playerNames.length,validations],rounds: [setting.numberOfRounds,});
     }),take(1),).subscribe();

}

对 GetSettings 的调度调用可能会在创建此组件之前更好地触发（因此它已经处于状态），通常通过 route resolver 执行此操作。