Правда в том, что вопрос излишний, причина, по которой вы не смогли его решить, заключается в том, что вы не знаете язык, но я все равно отвечу на него, потому что это может помочь большему количеству людей понять два подхода, которыеобъясню.
Как я понимаю, вы хотите быть на одной странице и изменить только представление в следующем случае:
- Вы отправляете HTTP-запрос и получаете данные из ИнтернетаКонечная точка API.
- Вы хотите изменить текущее представление страницы на какой-то новый текст и вставить данные из Web API в определенное поле в представлении.
СМой опыт работы с Angular, я предложу два способа сделать работу.Первый способ будет немного уродливым, но второй будет более элегантным, но для этого потребуется больше работы.(и некоторые продвинутые инструменты Angular)
Первый подход
Этот подход довольно прост (но не настолько элегантен), вы помещаете весь свой код в свои файлы HTML и TS.мы будем использовать * ngIf для переключения вида.Я постараюсь написать свой код как можно ближе к вашему коду.Я создам переменную с именем 'response', и она будет нулевой, как только мы получим данные из Web API, мы назначим данные нашей переменной 'response', давайте рассмотрим пример.
TypeScript:
export class AppComponent {
//#region Members
public response: any;
//#endregion
//#region Constructor
public constructor() {
this.response = null;
}
//#endregion
//#region Public Methods
public postQuestionnaireForm(customerIntake) {
console.log('postQuestionnaireForm(customerIntake)', customerIntake);
this.http.postQuestionnaireForm(customerIntake)
.subscribe(
data => this.response = JSON.stringify(data),
error => alert(error),
() => console.log('Finished')
);
}
//#endregion
}
HTML:
<div *ngIf="response === null">
<!-- This section will contain the required fields for HTTP Call. -->
<form>
<!-- More inputs here -->
</form>
</div>
<div *ngIf="response !== null">
<!-- This section contains the static data -->
Some data, static data
Some data, static data
Some data, static data
Some data, static data
{{ data }}
Some data, static data
Some data, static data
</div>
И с помощью вашей функции 'postQuestionnaireForm ()', когда данные будут возвращаться из Web API, переменная ответа будет изменена, и DOM ответитсоответственно.
Второй подход
В этом подходе мы создадим 3 компонента.
- Отчий компонент, имя: AppComponent.
- Компонент Child1, имя: FormComponent.
- Компонент Child2, имя: DataComponent.
AppComponent
TypeScript:
export class AppComponent {
//#region Members
public state: number;
@ViewChild(DataComponent) dataComponent: DataComponent;
//#endregion
//#region Constructor
public constructor() {
this.state = 1;
}
//#endregion
//#region Public Methods
public emitterFunction(data) {
this.state = 2;
this.dataComponent.setData(data);
}
//#endregion
}
HTML:
<div [hidden]="state !== 1">
<app-form (emitte)="emitterFunction($event)"></app-form>
</div>
<div [hidden]="state !== 2">
<app-data></app-data>
</div>
FormComponent
TypeScript:
export class FormComponent {
//#region Members
@Output() emitter: EventEmitter<any> = new EventEmitter();
//#endregion
//#region Constructor
constructor() { }
//#endregion
//#region Public Methods
public postQuestionnaireForm(customerIntake) {
console.log('postQuestionnaireForm(customerIntake)', customerIntake);
this.http.postQuestionnaireForm(customerIntake)
.subscribe(
data => this.emitter.emit(JSON.stringify(data))
error => alert(error),
() => console.log('Finished')
);
}
//#endregion
}
HTML:
<form>
<!-- More inputs here -->
inputs
</form>
DataComponent
TypeScript:
export class DataComponent {
//#region Members
public data: any;
//#endregion
//#region Constructor
constructor() {
this.data = null;
}
//#endregion
//#region Public Methods
public setData(data: any): void {
this.data = data;
}
//#endregion
}
HTML:
<div>
Some data, static data
Some data, static data
Some data, static data
Some data, static data
{{ data }}
Some data, static data
Some data, static data
</div>
Важно отметить, что мы разделили представление на 2 сентябрякомпоненты, которые могут действовать независимо.С этим разделением легче поддерживать, его легче понять, но оно сложнее для начинающих в Angular Framework.
Некоторые вещи, которые нужно объяснить:
- @ ViewChild - С этим мы получаем ссылкув наш дочерний компонент, мы используем его для получения ссылки на DataComponent, поэтому мы можем передавать данные из FormComponent.
- EventEmitter - это класс, который выбрасывает данные в родительский компонент, как вы можете видеть, мы добавили это в FormComponent имы позвонили, когда закончился HTTP-запрос.В AppComponent HTML мы добавили ссылку на функцию при активации эмиттера, которая передаст данные от дочернего компонента в родительский компонент в этой конкретной функции, а затем мы возьмем данные и передадим их в DataComponent.
- [скрыто] - я использовал это по важной причине, я хотел использовать * ngIf, но есть проблема, с * ngIf, если HTML даже не существует, поэтому в начале HTML ""даже не существуеткогда мы используем [скрытый], HTML существует, но он скрыт, поэтому у нас есть ссылка на DataComponent, и мы можем использовать функцию «setData (data)».