m0_71681226 2022-09-26 15:04 采纳率: 100%
浏览 57
已结题

在使用angular从API获取数据时失败

在使用angular从API获取数据时失败

data.service文件(Typescript)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { BookData } from './BookData';

@Injectable()


export class DataService{

private url:string = "http://localhost:3060/api/concert/";
constructor (private http:HttpClient){
}
public getAllBooks():Observable<BookData>{
return this.http.get<BookData>(this.url);
}
public getBooksById(category_ID:number):Observable<BookData>{
return this.http.get<BookData>(this.url+category_ID);
}
public deleteBook(book_ID:number):Observable<BookData>{
return this.http.delete<BookData>(this.url+book_ID);
}
public updateBook(book_ID:number,price:string):Observable<BookData>{
return this.http.put<BookData>(this.url,{"book_ID":book_ID,"price":price});
}
public insertBook(book_ID:number,title:string,author:string,price:string,description:string,category_ID:number):Observable<BookData>{
return this.http.post<BookData>(this.url,{"book_ID":book_ID,"title":title,"author":author,"price":price,"description":description,"category_ID":category_ID});
}
}
app.compent文件(Typescript)
import { Component } from '@angular/core';
import { DataService } from './data.service';
import { FormsModule } from '@angular/forms';
import { BookData } from './BookData';
@Component({
  selector: 'app-root',
  template: 'Hello! This is my Angular JS

List of all books <input type="button" value="Get all books" (click)="getAllBooks()">{{allBooks}}{{errorMessage}}'
, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'bookstore'; allBooks:BookData[]=new Array(); errorMessage:string=""; constructor(private dataService:DataService){ } getAllBooks(){ this.dataService.getAllBooks().subscribe( (d:any)=>{ this.allBooks=d; }, (err:any)=>{ this.errorMessage="No records found"; } ); } }
BookData文件(Typescript)
export class BookData{
book_ID:number;
title:string;
author:string;
price:string;
description:string;
category_ID:number;

constructor(b:number, t:string, a:string, p:string, d:string, c:number)
{
     this.book_ID=b;
     this.title=t;
     this.author=a;
     this.price=p;
     this.description=d;
     this.category_ID=c;
}
}
API中的GET方法,改API和一个名为bookstore_db的数据库连接在一起了
router.get("/", (req, res)=>{
    connection.query("select * from bookstore_db.book", (err, records,fields)=> {
         if (err){
             console.error("Error while retrieve the data");
         }else{
             res.send(records);
         }
    })
})

postman测试API里是有数据的

img


但在angular的页面里点击按钮取不到数据

img

请问怎么在angular中GET到数据

  • 写回答

3条回答

      报告相同问题?

      问题事件

      • 已结题 9月26日
      • 已采纳回答 9月26日
      • 创建了问题 9月26日

      悬赏问题

      • ¥15 vs创建SQL Server数据库时出现“系统找不到指定的路径”
      • ¥15 网页超时时间设置失效
      • ¥15 有关绿色信贷毕业论文的问题
      • ¥30 关于#机器人#的问题,如何解决?
      • ¥15 求MATLAB函数ScalarLayerDisplay的代码
      • ¥15 安卓如何自动执行检测到的NFC标签,无需再点确认
      • ¥15 pyHM库mouse模块的ValueError错误
      • ¥15 python opencv 摄像头 传感器
      • ¥30 eMMC&Android&C&Linux
      • ¥15 uniapp ios恢复购买