Я следовал руководству по динамическим c формам (https://angular.io/guide/dynamic-form), и все работало нормально, пока я не попытался получить данные из HttpClient.
Проблема : @Input() questions: QuestionBase<string>[] = []; в «Dynami c -form.component.ts» возвращает значение null.
Что я изменил? В question.service.ts я заменил оператор of rx js на this.<myHttpClientInstance>.get<any>(...), и тогда ничего больше не работало.
При прочих равных Я предположил, что проблема заключается в изменении с of на this.<myHttpClientInstance>.get<any>(...). Поэтому я распечатал на консоли два разных вывода: of и this.<myHttpClientInstance>.get<any>(...). Они загадочно выглядят иначе. Вот они:
Заявление об ограничении ответственности : ничего не изменилось в "app.component. html" (в частности, я Имею в виду эту строку кода: [questions]="questions$ | async")
Есть подсказка?
Изменить:
Сервисный код
constructor(private http: HttpClient) {}
getFormElementsFromHttpClient() {
return this.http.get<FormElementBase<any>[]>(environment.apiUrl + '/attribute-manager-be/view/fields')
.pipe(map( (response : any[]) => {
let formElementsList : FormElementBase<any>[] = [];
for (const formElement of response) {
switch (formElement.type) {
case "text":
formElementsList.push(
new FormElementText({
fieldId: formElement.id,
key: formElement.key,
label: formElement.label,
value: formElement.defaultValue,
required: formElement.required,
order: formElement.position
}),
)
break;
case "dropdown":
formElementsList.push(
new FormElementDropdown({
fieldId: formElement.id,
key: formElement.key,
label: formElement.label,
options: formElement.options,
required: formElement.required,
order: formElement.position
})
)
break;
case "checkbox":
formElementsList.push(
new FormElementCheckbox({
fieldId: formElement.id,
key: formElement.key,
label: formElement.label,
type: formElement.type,
order: formElement.position,
required: formElement.required
})
)
break;
case "multipleDropdown":
formElementsList.push(
new FormElementMultipleDropdown({
fieldId: formElement.id,
key: formElement.key,
label: formElement.label,
options: formElement.options,
order: formElement.position,
required: formElement.required
}),
)
break;
default:
break;
}
}
return formElementsList.sort((a, b) => a.order - b.order);
}
));
}
getFormElementsFromForOperator() {
let questions: FormElementBase<string>[] = [
new FormElementMultipleDropdown({
fieldId: 2,
label: "dropdown",
position: 4,
required: true,
key: "idtdropdown",
options: [
{
id: 1,
key: "ciambella",
value: "ciambella"
},
{
id: 2,
key: "oreo",
value: "oreo"
}
]
}),
new FormElementText({
fieldId: 1,
type: "text",
label: "text",
position: 3,
required: true,
key: "idtext",
options: null
}),
new FormElementCheckbox({
fieldId: 1,
type: "checkbox",
label: "checkbox",
position: 4,
required: true,
key: "idcheckbox",
options: null
}),
new FormElementDropdown({
fieldId: 4,
type: "multipleDropdown",
label: "multipledropdown",
position: 1,
required: true,
key: "multipledropdown",
options: [
{
id: 3,
key: "abbracci",
value: "abbracci"
},
{
id: 4,
key: "fagottini",
value: "fagottini"
}
]
})
];
return of(questions.sort((a, b) => a.order - b.order));
}
Код компонента (ts)
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [FormService]
})
export class HomeComponent {
questions$: Observable<FormElementBase<any>[]>;
constructor(formService: FormService) {
this.questions$ = formService.getFormElementsFromForOperator();
console.log("(for operator) works", this.formelements$);
console.log("(HttpClient) doesn't work", formService.getFormElementsFromHttpClient());
}
}