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

时间:2018-08-07 14:00:31

标签: angular rest slim

我已设置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项目中使用链接时,它不输出任何内容或无法检索其提供的数据。但是,当我尝试从字面上复制链接的输出并将其粘贴到文件中并将其存储到资产文件夹时,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可以通过什么方式显示查询?

1 个答案:

答案 0 :(得分:0)

最后,我同事的一个人帮助了我。 Chrome中名为“ p”的插件存在问题

允许控制-允许原点

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