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

Question

我正在尝试将从 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 中仍然没有显示结果。

Answer 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>

Answer 2

您应该在 class

的开头创建一个变量

data: Array<Partners>;

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

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

视图现在应该显示响应

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

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

How to display json data returned from PHP inside a component in Angular project

php

json

interface

ngfor

angular