Angular 服务无法读取 Slim REST API link

Question

我已经设置了 Slim REST API 以从 table 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);
});

然后我用这个 link 来调用它。

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

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

这是我的交易-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);
  }
}

这是我的交易-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);
}

}

这是我的交易-partner.ts class:

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 应用程序时，它显示查询 table。我认为这是浏览器支持问题。 Chrome 有什么方法可以显示查询吗？

Answer 1

终于有同事帮了我。 Chrome named,

中的插件存在问题

允许控制允许来源

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

Angular 服务无法读取 Slim REST API link

Angular service can't read Slim REST API link

rest

slim

angular