如何使用角度显示从服务器端返回的数组在组件内？

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数组：

[{"partner_name":"Udemy","0":"Udemy"},{"partner_name":"Nike","0":"Nike"}]

现在在客户端，我添加到 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

尝试像这样消耗休息：

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

您还需要做的另一件事是创建类或接口 Partner 与 json 中的适当字段。 当然，如果您不使其成为强类型，请这样做（但在 typescript 中不建议这样做）：

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

Answer 2

你得到undefined，因为数据是接收到的json，正如你所展示的，它是一个对象数组。 json 数组没有任何结果属性。

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

在这里你可以做什么。首先为你的数据创建一个模型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 中显示你的元素：

<ul>
    <li *ngFor="let res of results">
       {{ res.partner_name }}
    </li>
</ul>

Answer 3

结果对象不存在于您的 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');
        }
    )
 }