Преобразование HTTP-ответа json в машинописный объект в Angular8

Question

Я пытаюсь создать объект машинописи из ответа HTTP в angular8, но я получаю сообщение об ошибке:

ОШИБКА ReferenceError: Профиль не определен в SafeSubscriber._next (app.service.ts: 17) в SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber .__ tryOrUnsub (Subscriber.js: 196) в SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internals.SafeSubscriber.next (Subscriber.js: 134) в Subscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._next (Subscriber.js: 77) в Subscriber.push ../ node_modules / rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js: 54) в MapSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operator / map.js.MapSubscriber._next (map.js: 41)

Мой файл Profile.ts: здесь Мой файл app.service.ts: здесь

Я создаю класс компонентаобъект с этим результатом службы, и я также получаю ошибку

ОШИБКА TypeError:Не удается прочитать свойство 'имя' из неопределенного

, когда я использую его в файле 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>

Мой файл класса компонента: здесь

Answer 1

Вам не нужен дополнительный код для сопоставления с 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>

Answer 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>