Печать данных JSON на входе, угловая

Question

Я пытаюсь распечатать данные из json, доставленного на консоль, данные, доставленные на консоль, распечатать его на входе

это компонент ts

    examenClicked = (exa) => {
    this.dataService.getOneExamen(exa.id).subscribe(
      data => {
        this.selectedExamen = data;
        console.log('JSON DATA --->', data); 
      },

error => {
    console.log(error);
  }
);
}

этоhtml компонента

<button class="btn btn-primary"  (click)="examenClicked(examenes)">Detalle</button>     
              nombre examen <input type="text" [(ngModel)]="selectedExamen.nombreExa"><br>
              detalle examen <input type="text" [(ngModel)]="selectedExamen.descripcionExa"><br>
              creacion del registro <input type="text" [(ngModel)]="selectedExamen.release_date"><br>
              fecha del examen<input type="text" [(ngModel)]="selectedExamen.fechaExa"><br>
              categoria examen<input type="text" [(ngModel)]="selectedExamen.categoriaExa"><br>

, данные которого печатаются в текстовом поле

Answer 1

     examenClicked = (exa) => {
    this.dataService.getOneExamen(exa.id).subscribe(
      data => {
        this.selectedExamen.nombreExa = data.nombreExa;
        this.selectedExamen.descripcionExa= data.descripcionExa;
        this.selectedExamen.release_date= data.release_date;
        this.selectedExamen.fechaExa= data.fechaExa;
        this.selectedExamen.categoriaExa= data.categoriaExa;
        console.log('JSON DATA --->', this.selectedExamen); 
      },

error => {
    console.log(error);
  }
);
}

Answer 2

На основании вашего console.log () мы можем видеть, что вы используете old Http, пожалуйста, обновитесь до HttpClient. Http устарела целую вечность! Вы можете обратиться к документации: HttpClient

Но вкратце .... Так что удалите HttpModule и Http и замените их на HttpClientModule и HttpClient.

В модуле приложения:

import { HttpClientModule } from '@angular/common/http';

// ....

imports: [
  //...
  HttpClientModule
]

создайте интерфейс (или класс), так как вы должны ввести свои данные:

// name interface how you want
export interface Examene {
  id: number;
  nombreExa: string;
  // rest of properties here!
}

В вашем сервисе:

import { catchError } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

// ....

constructor(private httpClient: HttpClient) { }

getOneExamen(id): Observable<Examene> {
  return this.httpClient.get<Examene>('....').pipe(
    catchError(...)
  )
}

, а затем компонент:

selectedExamen = <Examene>{};

examenClicked(exa) {
  this.dataService.getOneExamen(exa.id).subscribe(
    (data: Examene) => {
      // with httpClient we don't need to parse json, so this works with HttpClient!
      this.selectedExamen = data; 
      console.log('JSON DATA --->', data); 
    },
    error => {
      console.log(error);
    }
  );
}

НО

Если вы используете слишком старую версию angular и вам по какой-то причине приходится использовать Http, вы пропускаетеdata.json() из вашего кода, поэтому он не работает так, как ожидалось. До HttpClient нам нужно было анализировать json по ответу, но теперь HttpClient делает это для нас. Так что в этом случае ваш код должен выглядеть так:

this.selectedExamen = data.json();

Answer 3

Данные не отображаются, потому что у вас есть объект в качестве значения. Передача такого значения решит проблему this.selectedExamen = data._body

 examenClicked = (exa) => {
   this.dataService.getOneExamen(exa.id).subscribe(
     data => {
      this.selectedExamen = data._body;
      console.log('JSON DATA --->', data); 
     },

     error => {
      console.log(error);
    }
    );
   }