Question

我正在使用PHP与Angular（版本5）从MySQL获取数据。我有这个php类：

<?php
header('Access-Control-Allow-Origin: *');

require_once("./serverConnection.php");

class affiliatePartner
{
    public function getPartners(){
        global $conn;
        $result = array();
        $getPartners = "SELECT partner_name FROM partner";
        $execGetPartners = $conn->prepare($getPartners);
        $execGetPartners->execute();
        $result = $execGetPartners->fetchAll();
        return json_encode($result);
    }
}
?>

然后我有一个php文件来运行该功能：

<?php
    require_once('affiliatePartner.php');

    $aff = new affiliatePartner;

    $result = $aff->getPartners();
    echo $result;
?>

当我运行文件时，我可以正常看到json数组：

[{＆＃34; PARTNER_NAME＆＃34;：＆＃34; Udemy＆＃34;＆＃34; 0＆＃34;：＆＃34; Udemy＆＃34;}，{＆＃34; PARTNER_NAME＆＃34 ;：＆＃34;耐克＆＃34;＆＃34; 0＆＃34;：＆＃34;耐克＆＃34;}]

现在在客户端，我添加到了app.module.ts：

import { HttpModule } from '@angular/http';

并将其导入导入：

imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule
  ],

在组件中：

constructor(private fb: FormBuilder, private http: Http){
    this.createForms();
  }

  ngOnInit(){
    this.http.get('http://aff.local/getPartners.php').subscribe(
            data =>{
                this.results = data['result'];
                console.log(this.results);
            },
            error =>{
                console.log('error');
            }
        )
 }

现在在控制台，我看到了Undefined：

那么如何在控制台中显示合作伙伴的名称？

修改

当我记录数据时，我得到了这个：

但我只需要显示：

Udemy

耐克

Answer 1

结果对象在您的json中不存在，因此请将其删除并直接访问。我只是展示如何遍历对象数组，你需要在html中执行相同的循环。确保已导入rxjs库。

//import 'rxjs/add/operator/map';

ngOnInit(){
this.http.get('http://aff.local/getPartners.php').map(repsonse => response.json()).subscribe(
        data =>{
            this.results = data;
            var res = this.results.map(data=>{
            console.log(data. partner_name)
            })
        },
        error =>{
            console.log('error');
        }
    )
 }

Answer 2

尝试像这样消费休息：

 this.http.get('http://aff.local/getPartners.php')
   .map(response => response.json).catch(error => console.log(error)
   .subscribe(partners: Partner[] => this.results = partners);

您需要做的另一件事是使用json中的适当字段创建类或接口Partner。当然，如果你没有强力输入，那么这样做（但不建议在打字稿中使用）：

 this.http.get('http://aff.local/getPartners.php')
   .map(response => response.json).catch(error => console.log(error)
   .subscribe(partners => this.results = partners);

Answer 3

你得到my: path: \\hostname\dir因为数据是收到的json，正如你所示，它是一个对象数组。 json数组没有任何结果属性。

您可以将数据直接放入结果变量中，并且可以使用类型强制执行收到的内容。

你可以做什么。首先创建数据模型undefined：

partner.ts

然后按如下方式修改您的组件：

export class Partner {
    partner_name: string;
    // other properties here
}

最后，在@Component({ selector: 'app-home', templateUrl: './home.component.html', }) export class HomeComponent implements OnInit { results: Partner[]; ngOnInit(){ this.http.get<Partner[]>('http://aff.local/getPartners.php').subscribe( data =>{ this.results = data; console.log(this.results); }, error =>{ console.log('error'); }) } }中显示您的元素：

home.component.html

如何使用angular显示从组件内部返回的数组？

3 个答案: