Я не могу показать содержимое объектов моего сервиса. - PullRequest
Новая
       16

Я не могу показать содержимое объектов моего сервиса.

0 голосов
/ 20 ноября 2018

Я хочу поставить на компонент HTML, переменные объектов, которые становятся из службы.И я не могу.

Мой компонент: 

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Profesional, ProfesionalService} from '../../profesional.service';


@Component({
  selector: 'app-gestion-profesionales',
  templateUrl: './gestion-profesionales.component.html',
  styleUrls: ['./gestion-profesionales.component.css']
})
export class GestionProfesionalesComponent implements OnInit {
  prof = new Array<Profesional>();
  tags;



  constructor(private profesionalService: ProfesionalService) { }

  ngOnInit() {
    this.allProf();
  }
    allProf(): void {
    this.profesionalService.getProfesionales()
      .subscribe(data => {
        this.prof= data;
        console.log(this.prof);

      });
  }
}

Мой сервис: 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';

export interface Profesional {
  ID: number;
  Name: string;
  College: string;
  DNI: string;
  Surname: string;
  Email: string;
  Password: string;
  Phone: string;
  Photo: string;
}


const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class ProfesionalService {

  private profesionalesUrl = 'https://h205.eps.ua.es:8080/profesionales';  // URL to web api

  constructor(
    private http: HttpClient
  ) { }

  /** GET obtenemos todos los profesionales */
  getProfesionales (): Observable<Profesional[]> {
    return this.http.get<Profesional[]>(this.profesionalesUrl)
      .pipe(
        tap(profesionales => this.log(`fetched profesionales`)),
        catchError(this.handleError('getProfesionales', []))
      );
  }
}

И когда я делаю запрос, все в порядке.Ответ JSON выглядит следующим образом: 

Object results:
Array(35)
0: {ID: "1", DNI: "71955507F", College: "mimi", Name: "pepe", Surname: "popo", …}
1: {ID: "_09y4nb7b1", DNI: "434632tnm", College: "siuno", Name: "Matasanos", Surname: "Berenguer Pastor", …}

Итак, у меня проблемы с отображением информации в моем компоненте HTML.Я хочу сделать это с помощью ng-for, но это не работает.Появляется эта ошибка: Не удается найти другой поддерживающий объект '[object Object]' типа 'object'.NgFor поддерживает только привязку к итерациям, таким как массивы. 

<table>
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Phone number</th>
    <th>Email</th>
  </tr>
 <tbody>

   <tr *ngFor="let item of prof">
    <td>{{ item.Name }}</td>
    <td>{{ item.Surname }}</td>
    <td>{{ item.Phone }}</td>
    <td>{{ item.Email }}</td> 
   </tr>

 </tbody>
</table>

Возможно, это связано с переменной prof, которая формируется экземплярами Profesional.Я не знаю, как правильно показывать информацию.

1 Ответ

0 голосов
/ 20 ноября 2018

вы получили массив JSON, а не Javascript Object от api, поэтому, когда javascript пытается выполнить цикл, который показывает ошибку, потому что ваша попытка получает объект, которого у вас нет.

Используйте функцию JSON.parse () для преобразования ее в объект JS.

измените эти строки 

this.prof = data

с помощью 

this.prof = JSON.parse(data);

так вот как это 

 ngOnInit() {
    this.allProf();
  }
    allProf(): void {
    this.profesionalService.getProfesionales()
      .subscribe(data => {
        this.prof = JSON.parse(data);
        console.log(this.prof);

      });
  }
...