Преобразование HTTP-ответа json в машинописный объект в Angular8
Я пытаюсь создать объект typescript из ответа HTTP в angular8, но получаю сообщение об ошибке:
ERROR ReferenceError: Profile is not defined at SafeSubscriber._next (app.service.ts:17) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
Мой файл Profile.ts: здесь Мой файл app.service.ts: здесь
Я создаю объект класса компонентов с этим результатом службы, и я также получаю сообщение об ошибке
ERROR TypeError: Cannot read property 'name' of undefined
когда я использую его в файле HTML.
Вывод консоли для инструкции в сервисном файле:
{
name: "somename",
status: "sometext",
bio: "sometext",
email: "email",
gitlab: "link",
twitter: "link",
instagram: "link",
linkedin: "link",
telegram: "link"
},
Этот вывод сопровождается ошибками.
Мой HTML-код в ближайшее время:
<p class = "ui header">{{profile.name}}</p>
Мой файл класса компонентов: здесь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема в getProfile() методе вашего AppService. Вы возвращаете this.profile из этого метода, вместо этого вы должны вернуть наблюдаемое, подобное этому:
getProfile(): Observable<Profile> {
return this.http.get(this.profileApiUrl)
.pipe(
map(pro => new Profile(pro))
);
}
Теперь в компоненте внедрите эту службу в конструктор компонента следующим образом:
//have a class variable
//this will be used in the template to render the profile
profile: Profile;
constructor(private _appService: AppService) {}
ngOnInit() {
this._appService.getProfile().subscribe(pro => {this.profile = pro;});
}
Используйте безопасный оператор в шаблоне -
<p class = "ui header">{{profile?.name}}</p>
Не помогло, попробовал ваши изменения, выдает дополнительную ошибку "Профиль не является конструктором".
@Sivaramakrishnan У вас есть конструктор в вашем классе Profile.
@Sivaramakrishnan поделитесь своим обновленным кодом; Код, которым я поделился, работает для меня. Это какая-то другая проблема.
Данные по-прежнему не распечатываются.
Давайте продолжить обсуждение в чате.
@Sivaramakrishnan, вам нужно использовать ключевое слово export перед class Profile
Я экспортировал класс.
Вам не нужен дополнительный код для сопоставления с объектом Profile. HttpClient сделает это за вас.
Вам нужно внести несколько изменений в service.ts, как показано ниже:
getProfile(): Observable<Profile> {
this.http.get<Profile>(this.profileApiUrl)
.pipe(map((pro: any) =>{
this.profile = pro;
return pro
});
}
}
В компоненте:
ngOnInit() {
this._appService.getProfile().subscribe(pro => this.profile = pro;);
}
И в вашем html:
<p class = "ui header">{{profile?.name}}</p>
Добавление обновления к вышеуказанной проблеме. Теперь оператор console.info(this.profile) в службе печатает данные. Но в компоненте данные не печатаются. Я не знаю, почему?