Пользователь FOSUserBundle с Angular 4 - PullRequest
Новая
       10

Пользователь FOSUserBundle с Angular 4

0 голосов
/ 09 октября 2018

Я работаю с Angular5 и Symfony2.8!Я хотел сделать так, чтобы все пользователи из класса FOSUserBundle перешли от symfony к angular!

Партия Symfony работает нормально enter image description here

Проблема с угловой частью!enter image description here

Когда я погуглил ошибку, я обнаружил, что полученные данные (JSON от Symfony) не соответствуют классу модели, который я сделал в угловом

это модель класса Marisupilami.ts (она представляет мой класс FOSUserBundle в Symfony): 

export class Marisupilami {
  constructor(
    public id,
    public username: string,
    public username_canonical: string,
    public email: string,
    public email_canonical: string,
    public enabled: boolean,
    public password: string,
    public last_login: string,
    public roles: Array<any>,
    public friends: Array<any>,
    public race: string,
    public famille: string,
    public nourriture: string,
    public age: string
  ) {}
}

Marsipularmi-c.service.ts : 

import { Injectable } from "@angular/core";
import { Http, Response, Headers } from "@angular/http";
import { Observable } from "rxjs";
import { Marisupilami } from "./Marisupilami";
import "rxjs/add/operator/catch";
import "rxjs/add/operator/map";
import "rxjs/add/observable/throw";
import "rxjs/add/operator/do";

@Injectable()
export class MarsipularmiCService {
  constructor(private _http: Http) {}
  private uri = "http://127.0.0.1:8000/Action/api/users";

  getUsers(): Observable<Marisupilami[]> {
    const headers = new Headers();
    return this._http
      .get(this.uri, { headers: headers })
      .map(res => <Marisupilami[]>res.json())
      .do(data => console.log("All: " + JSON.stringify(data)))
      .catch(this.handelError);
  }
  private handelError(error: Response) {
    return Observable.throw(error.json().errors || "server error");
  }
}

Код компонента ts Affichage.component.ts : 

import { Component, OnInit } from "@angular/core";
import { Marisupilami } from "../Marisupilami";
import { MarsipularmiCService } from "../marsipularmi-c.service";

@Component({
  selector: "app-affichage",
  templateUrl: "./affichage.component.html",
  styleUrls: ["./affichage.component.css"]
})
export class AffichageComponent implements OnInit {
  users: Marisupilami[];
  errorMessage: string;
  constructor(private _userService: MarsipularmiCService) {}

  getUsers() {
    console.log("hello");
    this._userService
      .getUsers()
      .subscribe(
        (users: Marisupilami[]) => (
          (this.users = users), error => (this.errorMessage = <any>error)
        )
      );

    console.log(this.errorMessage);
    console.log("in the get");
  }

  ngOnInit() {
    this.getUsers();
  }
}
Код компонента html Affichage.component.html : 

hello users
<h1 class="text-primary">Users </h1>

<div *ngFor="let p of  users">

  <div class="panel">
    <br>
    <br>
    <br>
    <div class="panel-header">
      {{p.username}}
    </div>

    <div class="panel-body">
      {{p.race}}
    </div>



  </div>


</div>

Есть ли конкретное представление класса FOSUserBundle в угловых?или есть другой способ сделать это?

1 Ответ

0 голосов
/ 09 октября 2018

изменить функцию на 

getUsers() {
    this._userService.getUsers()
      .subscribe(
        (data: Marisupilami[]) => {
             this.users = data
        },error=>{
            this.errorMessage = <any>error
        }
        )
      );
  }
...