Angular 4 的 FOSUserBundle 用户

Question

我正在使用 Angular5 和 Symfony2.8！我想做的是让 FOSUserBundle Class 中的所有用户从 symfony 到 angular！

symfony 部分工作正常

问题出在 Angular 部分！

当我用谷歌搜索错误时，我发现检索到的数据（JSON 来自 Symfony）与我在 angular[=17= 中创建的模型 class 不匹配]

这是模型 class Marisupilami.ts（它代表我在 Symfony 中的 FOSUserBundle Class）：

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>

在 angular 中是否有 FOSUserBundle class 的特定表示？或者还有另一种方法吗？

Answer 1

将函数更改为

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

Angular 4 的 FOSUserBundle 用户

FOSUserBundle User with Angular 4

angular

typescript

symfony

fosuserbundle