2017-07-30 30 views
1

我想從PHP使用Angularjs 2 Observable獲取JSON數據。我有PHP文件返回JSON數據。我使用Angularjs 2觀察到的,有一個模型(用戶),但我收到以下錯誤:使用Angularjs 2從PHP獲取JSON數據Observable

Type 'User' is not assignable to type 'User[]' Property 'length' is missing in type 'User'.

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); 

?> 

注:我從幾乎每一個問題/答案就在計算器上,觀看YouTube視頻和閱讀其他文章,但它並沒有幫助。大多數文章對於初學者來說並不簡單,而且非常複雜。

回答

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

+0

謝謝。這固定了錯誤,但在控制檯登錄'ngInOnit'後仍然沒有看到數據。在控制檯日誌中,我看到:沒有UserService的提供者。 –

+0

@MaihanNijat完全不同的問題。如果我按照你的說法解決了你的錯誤,那麼請選擇我的答案。如果您無法弄清楚如何解決這個其他錯誤,請使用詳細信息打開一個新問題 – BeetleJuice