使用 Angularjs 2 Observable 从 PHP 获取 JSON 数据

Question

我正在尝试使用 Angularjs 2 Observable 从 PHP 获取 JSON 数据。我有返回 JSON 数据的 PHP 文件。我正在使用 Angularjs 2 Observable 并且有一个模型（用户），但我收到以下错误：

类型“用户”不可分配给类型“用户[]”属性“长度”是 缺少类型“用户”。

app.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from './users.service';
import { User} from './user';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'کانکور پایلې';

  user: User;


  constructor(private service: UserService) {

  }

  ngOnInit() {
    this.service.getUser().subscribe(user => this.user = user);
  }
}

users.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import { User} from './user';

@Injectable()

export class UserService {

  constructor(private _http:Http) {

  }

  extractData(res: Response){
    return res.json();
  }

  getUser():Observable<User > {
    return this._http
    .get('localhost/data.php')
    .map(this.extractData);
  }
}

user.ts

export class User {
  id: string = '';
  name: string = '';
  fName: string = '';
  lName: string = '';
  gFatherName: string = '';
  school: string = '';
  year: number = 0;
  score: number = 0.00;
  result: string = '';
  province: string = '';
  gender: string = '';

  constructor(values: Object = {}){
    Object.assign(this, values);
  }
}

PHP 文件

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$dsn = "mysql:host=localhost;dbname=mydb";
$username = "root";
$password = "";

$dbh = new PDO($dsn, $username, $password, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'UTF8'"));
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


$id = "J01017935";

$output = "";

try {
  $statement = $dbh->prepare("SELECT * from results WHERE id = ?;");
  if($statement->execute(array($id))) {
    while($row = $statement->fetchAll(PDO::FETCH_ASSOC)){
      $output = $row;
    }
  }
} catch(Exception $e){
  print("Error " . $e->getMessage());
  die();
}
$dbh = null;

echo json_encode($output, JSON_UNESCAPED_UNICODE);

?>

注意：我浏览了 StackOverflow 上的几乎所有问题/答案，观看了 youtube 视频并阅读了其他文章，但这并没有帮助。对于初学者来说，大多数文章都不是直截了当的，而且非常复杂。

Answer 1

问题在于，在 Angular 中，getUser 期望服务器返回单个 User，但它得到一个包含 User 的数组。

问题的根源在于您如何从数据库中检索信息。这是您的 PHP 代码：

while($row = $statement->fetchAll(PDO::FETCH_ASSOC)){
  $output = $row;
}

fetchAll 返回一个行数组。由于只找到一行，$output 成为一个包含单个元素的数组。

最简单的解决方法是捕获fetchAll() 的第一个（也是唯一一个）成员

$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$ouput = $results ? $results[0] : null;

您现在应该可以json_encode 并返回$output