如何在Angular项目的组件内显示从PHP返回的json数据答案

【问题标题】：How to display json data returned from PHP inside a component in Angular project如何在Angular项目的组件内显示从PHP返回的json数据
【发布时间】：2018-06-24 02:05:53
【问题描述】：

我正在尝试将从 php 返回的数据作为 JSON 数组显示到我的组件中。

在这个ngOnInit()我添加了以下脚本：

ngOnInit(){
this.http.get('http://aff.local/getPartners.php').subscribe(
    (response: Response) =>{
      const data = response.json() as Partners;
      console.log(data);
      //this.keys.push(this.data);
    },
    error =>{
      console.log('error');
    }
  )
}

PHP 脚本如下：

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
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();

        // foreach($result as $res)
        // {
        //  $res=array('partner_name'=>$result['partner_name']);
        // }
        return json_encode($result);
    }
}
?>

我得到了以下结果：

然后，我想在一个 div 中显示 Udemy 和 Nike：

  <ul *ngFor="let datas of data;">
    {{datas}}
  </ul>

但组件中没有出现任何内容。

我稍微搜索了一下，有人用了一个接口，所以我创建了一个接口：

import { Injectable } from '@angular/core'

export interface Partners{
    name: String;
}

在主要组件中：

import { Partners } from './Interfaces';

我把脚本改成：

ngOnInit(){
this.http.get('http://aff.local/getPartners.php').subscribe(
    (response: Response) =>{
      const data = response.json() as Partners;
      console.log(data.name);
      //this.keys.push(this.data);
    },
    error =>{
      console.log('error');
    }
  )
}

但我的 div 中仍然没有显示结果。

【问题讨论】：

标签： php json angular interface ngfor

【解决方案1】：

您需要在组件的顶部声明一个变量。然后，您需要将返回的结果存储在该变量中。

public partners: any = [];

ngOnInit(){
  this.http.get('http://aff.local/getPartners.php').subscribe(
    (response: Response) =>{
      this.partners = response.json() as Partners;
      console.log(this.partners);
    },
    error =>{
      console.log('error');
    }
  )
}

完成后，您可以在 html 中使用以下内容

<ul *ngFor="let partner of partners">
    <li>{{partner.partner_name}}>/li>
</ul>

在下拉菜单中显示它

<select>
    <option *ngFor="let partner of partners; let i = index">{{partner.partner_name}}</option>
</select>

如果您使用的是 Angular5

<select>
    <option *ngFor="let partner of partners; index as i">{{partner.partner_name}}</option>
</select>

【讨论】：

成功了。所以我唯一的错误就是放了一个公共数组变量？
是的，您将它存储在一个范围为subscribe 事件的变量中。创建一个全局变量并将其存储在那里，您也可以在 html 文件中访问该变量。我很高兴我的解决方案有所帮助，然后请将我的答案标记为正确:)
我会在 6 分钟内。如何在下拉列表中显示数组？
还有一件事。我正在添加 let i = index 但它不起作用
再次更新了我的答案以包含索引内容

【解决方案2】：

您应该在课程开始时创建一个变量

data: Array<Partners>;

然后在您的订阅中，不要为从 api 获得的值创建一个常量，而是这样做

this.data = response.json() as Partners;

视图现在应该显示响应

<ul><li *ngFor="let datas of data">{{datas.partner_name}}</li><ul>

【讨论】：