как перечислить объект в angular, вызывая API java с заголовком и телом?

Question

Я хочу перечислить данные об ученике, позвонив по телефону java api, которые имеют ответ ниже. Я хочу значения из данных, которые будут иметь несколько значений. Ниже приведен метод, который я вызываю в классе component.ts.

ngOnInit() {
        this.loading = true
        this.httpService.get('/student').subscribe(
            result => {
                console.log('received results');
                this.loading = false;
                this.scouts = result;
            },
            error => {
                console.log('failed');
                this.loading = false;
            }

``
This is the api response. 
``
{
data: [
{
id: 101,
name: "John doe",
status: "enrolled",
}
],
errors: [ ],
warnings: [ ],
meta: { }
}
```

I tried to using this as html code but this won't work and in the component part i have called the httpservice with get request in ngOnInit part. 
``
<tr *ngFor="let student of students">
        <td>{{student.id}}</td>
        <td>{{student.name}}</td>
        <td>{{student.status}}</td>
        ```

Please can you guide me how can i get the student details from data part and list it in front end. Thank you. 

Answer 1

Из передового опыта:

Использование URL-адреса на уровне обслуживания (поскольку оно постоянно используется только внутри службы)

Определение модели StudentResponce, чтобы вы могли json ответ.

Определите модель Student, которая будет иметь свойство StudentReponse

, тогда ваш компонент станет

 ngOnInit() {
    this.loading = true;
    this.httpService.getStudents().subscribe(
        result => {
            console.log('received results');
            this.loading = false;
            this.scouts = result.data;
            /*or this.scouts = [...result.data] */
            //warning = result.warning
            //meta = result.meta
            //errors = [...result.errors]
        },
        error => {
            console.log('failed');
            this.message = error.message;
            this.loading = false;
        });
  }

, а служба

 const url = "http://replace_with_service_url";
 @Injectable()
 export class MyHttpService {

   constructor(private client: HttpClient) { 
   }
     getStudents(): Observable<StudentResponse>{
       return this.client.get<StudentResponse>(url);
     }
 }
 export class StudentResponse{
   data: Student[];
   warning: any;
   errors: any[];
   meta: any;
 }
 export class Student{
   id: number;
   name= "";
   status: string /*or enum "enrolled"*/;
 }

Вы можете заменить свой сервисный URL в этот код для проверки

Answer 2

Просто измените это назначение:

this.scouts = result;

на

this.scouts = result.data;