Angular 服务无法读取 Slim REST API 链接答案

【问题标题】：Angular service can't read Slim REST API linkAngular 服务无法读取 Slim REST API 链接
【发布时间】：2018-08-07 14:00:31
【问题描述】：

我已设置 Slim REST API 以从表 trading_partner 中获取数据。

<?php
// Call database connection
require_once('dbconnect.php');

// Display all records
$app->get('/path/to/trading_partner', function($request) {

    $query = "SELECT *
              FROM trading_partner
              order by trading_partner_id";
    $result = mysql_query($query);

    while($row = mysql_fetch_assoc($result)) {

        $data[] = $row;
    }

    if(isset($data)) {

        return json_encode($data);
    }

    mysql_close($conn);
});

然后我使用此链接调用它。

http://localhost:52095/path/to/trading_partner

我的问题是当我尝试在我的 Angular 项目中使用该链接时，它不输出任何内容或无法检索它提供的数据。但是当我尝试从字面上复制链接的输出并将其粘贴到文件中并将其存储到 assets 文件夹时，Angular 会正确读取它。

这是我的 `trading-partner.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';

import { TradingPartner } from './trading-partner';

const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class TradingPartnerService {

  private tradingPartnerUrl = 'http://localhost:52095/path/to/trading_partner';

  constructor(private http: HttpClient) { }

  getTradingPartners (): Observable<TradingPartner[]> {

return this.http.get<TradingPartner[]>(this.tradingPartnerUrl);
  }
}

这是我的 trading-partners.component.ts：

import { Component, OnInit } from '@angular/core';

import { TradingPartner } from './trading-partner';
import { TradingPartnerService } from './trading-partner.service';

@Component({
  selector: 'app-trading-partners',
  templateUrl: './trading-partners.component.html',
  styleUrls: ['./trading-partners.component.css']
})
export class TradingPartnersComponent implements OnInit {

tradingPartners: TradingPartner[];

constructor(private tradingPartnerService: TradingPartnerService) { }

ngOnInit() {

    this.getTradingPartners();
}

getTradingPartners(): void {
    this.tradingPartnerService.getTradingPartners()
    .subscribe(tradingPartners => this.tradingPartners = tradingPartners);
}

}

这是我的 trading-partner.ts 类：

export class TradingPartner {
    trading_partner_id: number;
    tp_name: string;
    tp_location: string;
    flag: number;
    creation_date: string;
    created_by: string;
    update_date: string;
    updated_by: string;
}

我还在学习 Angular 和 PHP。我做错了什么？

更新：我使用 Chrome 运行它，但是当我尝试使用 Microsoft Edge 打开我的 Angular 应用程序时，它会显示查询表。我认为这是浏览器支持问题。 Chrome 有什么方法可以显示查询吗？

【问题讨论】：

标签： angular rest slim

【解决方案1】：

我的同事终于有人帮助了我。这是Chrome中名为的插件的问题，

Allow-Control-Allow-Origin

安装并启用后，我可以查看 REST API 调用。

【讨论】：