使用NGXS调用API-data，并在form-element中进行设置

Question

我有一个API，其中包含一些数据。我正在成功地从这个API获取数据。模板中的Angular async 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, validations],
});
}

设置.状态.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,
});
}));
}

设置.model.ts:

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

Answer 1

您可能需要尝试以下操作-在加载设置之前不要创建表单。

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, validations],
});
}),
take(1),
).subscribe();
}

GetSettings的调度调用可能最好在创建该组件之前触发(因此它已经处于状态(，通常通过路由解析器来完成。