代码之家 › 专栏 › 技术社区 › Az Emna

具有角度4的FOSUserBundle用户

fosuserbundle symfony typescript angular

0

Az Emna · 技术社区 · 7 年前

symfony部分工作正常

问题是有棱角的部分!

当我搜索错误时,我发现检索到的数据(来自Symfony的JSON)与我在angular中创建的模型类不匹配

这就是模型 Marisupilami.ts类 (它代表我在Symfony中的FOSUserBundle类):

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 :

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

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类的特定表示?还是有别的办法?

1 回复 | 直到 7 年前

1

0

Exterminator 7 年前

将函数更改为

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