Angularjs2与php和mysql的双向数据绑定

我从angularjs2开始。我想用angularjs2、php和mysql实现两种数据绑定方式。我真的不知道这是否可能，我想不出来

我返回Json数据，但得到一个错误：SyntaxError:Unexpected token<在Json中的位置0

我想实现两种数据绑定方式，以便在数据库发生更改时，在客户端进行更新。我不想使用Ajax向数据库发送太多请求。有办法吗？我去了Websocket，但我迷路了

如果这是不可能的，那么在没有框架的php中如何做到这一点呢？提前谢谢

这是我的代码：

app.component文件

import {Component} from 'angular2/core';
import {OnInit} from 'angular2/core';

import {spcService} from './spc.service';
import {HTTP_PROVIDERS} from 'angular2/http';


@Component({
    selector: 'my-app',
    template: `
    <h1>My First Angular 2 App</h1>
    <spc_match></spc_match>
    {{contour}}   

    <ul>
        <li  *ngFor ="#elt of element">
            {{ elt.Nom_etud }}

        </li>
    </ul> 
    `,

    providers: [spcService, HTTP_PROVIDERS]
})
export class AppComponent implements OnInit {

    element: any[];
    contour ="Test angular"; 

    constructor (private _spcService: spcService){

    }

    ngOnInit(){
          this._spcService.getPost()
         .subscribe(
         element => this.element = element,
         spcs => console.log(spcs),
             );
    }
 }

从'angular2/core'导入{Component}；
从'angular2/core'导入{OnInit}；
从“/spc.service”导入{spcService}；
从'angular2/HTTP'导入{HTTP_提供者}；
@组成部分({
选择器：“我的应用程序”，
模板：`
我的第一个Angular 2应用程序
{{等高线}}


{{elt.Nom_etud}


`,
提供者：[spcService，HTTP\U提供者]
})
导出类AppComponent实现OnInit{
要素：任何[]；
轮廓=“测试角度”；
构造函数（私有的spcService:spcService）{
}
恩戈尼尼特（）{
这是.\u spcService.getPost（）
.订阅(
element=>this.element=element，
spcs=>console.log（spcs），
);
}
}

spc.service.ts文件

import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';


//import {Elements} from './elements';

@Injectable()

export class spcService{
   // getMatchlist(): string[]{
   //     return ["match1","match2","match3"];
   // }

 // private _ulr ="http://jsonplaceholder.typicode.com/posts";
 private _ulr ="http://localhost:3000/server/student_liste.php";
  //private _ulr ="server/student_liste.php";
   constructor( private _http : Http){}

   getPost(){
      return this._http.get(this._ulr)
       .map( res =>res.json())
      // .map( res  =><Element[]> res.json())
   }
}

从'angular2/Http'导入{Http}；
从'angular2/core'导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
//从“./Elements”导入{Elements}；
@可注射（）
导出类spcService{
//getMatchlist（）：字符串[]{
//返回[“匹配1”、“匹配2”、“匹配3”]；
// }
//私人_ulr=”http://jsonplaceholder.typicode.com/posts";
私人_ulr=”http://localhost:3000/server/student_liste.php";
//private _ulr=“server/student_liste.php”；
构造函数（私有http:http）{}
getPost（）{
返回此。_http.get（此。_ulr）
.map（res=>res.json（））
//.map（res=>res.json（））
}
}

从服务器加载数据的php脚本

<?php

header("Content-Type: application/json; charset=UTF-8"); 

function get_student_list() {
    $result_trans =array();
date_default_timezone_set('Africa/Abidjan');
$connect=new mysqli('localhost','root','root','test_angular')or die('erreur de connexion a la db');
$connect->set_charset('utf8');

  $liste_eleves='SELECT *  FROM eleves';

    $stmtfind_race= $connect->stmt_init();
    $stmtfind_race->prepare($liste_eleves) ;
    $stmtfind_race->bind_result($ident,$nom,$prenom,$age);
    $stmtfind_race->execute();
    $stmtfind_race->store_result();
    $numRows = $stmtfind_race->num_rows;
     while ( $stmtfind_race->fetch()) {
      # code...
      $result_trans [] = array("id_etud"=>$ident,"Nom_etud" => $nom,"Prenom" => $prenom, "Age"=> $age);
    }
    return  $result_trans;
}

    $value = get_student_list(); 

echo json_encode($value,JSON_PRETTY_PRINT) ;
?>

您的错误表明响应中存在格式错误的JSON。脚本中最有可能出现错误。但我的php脚本返回正确的json。我不知道为什么会出现这个错误？嗯，看起来它不是有效的json。在

getPost

-方法中，尝试映射数据并查看其外观：

.map（（res:Response）=>{console.log（'res'，res）；}）

您的代码似乎返回整个脚本而不是json。这就是响应？？您的错误表明响应中存在格式错误的json。脚本中最有可能出现错误。但我的php脚本返回正确的json。我不知道为什么会出现这个错误？嗯，看起来它不是有效的json。在您的

getPost

-方法中，尝试映射数据并查看其外观：

.map（（res:Response）=>{console.log（'res'，res）；}）

您的代码似乎返回整个脚本而不是json。这就是响应？？