如何从 Angular 7 中的数据库中获取数据？答案

【问题标题】：how to fetch data from the database in angular 7?如何从 Angular 7 中的数据库中获取数据？
【发布时间】：2019-06-04 07:15:03
【问题描述】：

我正在使用 PHP fetch API 从数据库中获取数据。下面的 PHP fetch API 与 react App 一起工作正常，但使用 angular 获取时出错。这是我使用 PHP fetch API 的完整代码。

app.component.ts:

import { Component } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   constructor(private httpClient: HttpClient){}
  name = 'My App';
 students:any = [];
  baseUrl='http://veomit.com/test/zend/api/fetch.php';
  get_products(){
        this.httpClient.get(this.baseUrl).subscribe((res :{})=>{
        console.log(res);
        this.students = res;
        });
    }
}

app.component.html:

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<button (click)="get_products()">GET Data</button>
<ul>
      <li *ngFor="let student of students" >
        userId: {{student.name}}
        Hellotitle: {{student.department}}
        body: {{student.marks}}
      </li>
    </ul>

php 获取 API - fetch.php

<?php 

    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Request-Headers: GET,POST,OPTIONS,DELETE,PUT");
$con = mysqli_connect("mysql1004.mochahost.com","a310387_task_for","task_force","a310387_task_force");
$ar=array();

     $query=mysqli_query($con,"select * from student");
     while ($rows=mysqli_fetch_array($query)) {
        $ar[]=$rows;
     }
 echo json_encode($ar);

 ?>
```
Below is my console error:

    HttpErrorResponse {headers: {…}, status: 0, statusText: "Unknown Error", url: "http://veomit.com/test/zend/api/fetch.php"…}
    error: ProgressEvent
    isTrusted: true
    __proto__: ProgressEvent
    headers: HttpHeaders
    headers: Array[0]
    lazyUpdate: null
    normalizedNames: Array[0]
    __proto__: HttpHeaders
    message: "Http failure response for http://veomit.com/test/zend/api/fetch.php: 0 Unknown Error"
    name: "HttpErrorResponse"
    ok: false
    status: 0
    statusText: "Unknown Error"
    url: "http://veomit.com/test/zend/api/fetch.php"
    __proto__: HttpErrorResponse

【问题讨论】：

次要文本格式

标签： php angular fetch angular7

【解决方案1】：

请先从这个命令生成服务 ng g service service_name 然后构造一个函数--

 getAllData(url, headerData = {}){
    const getUrl = this.apiUrl + url;
    //let header:any={'authtoken':this.token};
    return this.http.get(getUrl, { headers: headerData })
    .map(result => result)
    .catch(this.handleError)
  }

然后在 app componen.ts 中

get_product(){

 this.service_name.getAllData(this.url).subscribe(
   (response: any) => {

      if (response.status == true) {
      
      } else {
       
      }
    });
}

【讨论】：