如何通过 HTTP Get 请求使用 Express、Node JS 和 Angular 返回对象数组[重复]

Question

我已经复制了本教程 https://malcoded.com/posts/angular-backend-express/ 来设置一个 Angular 应用程序和一个带有 Node.js 的快速服务器

我现在正尝试发送一个 GET 请求以使用以下代码检索对象数组：

import { Component, OnInit } from '@angular/core';
import { CatService } from './cat/cat.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'malcodedTutorial';
  constructor(private catSerivce: CatService) { }

  cats = [];

  ngOnInit() {
    const catsObservable = this.catSerivce.getAllCats();
    catsObservable.subscribe((catsData: []) => {
        this.cats = catsData;
    });
    console.log(this.cats);
  }
}

另外，这里是 server.js 文件：

const express = require('express');
const app = express();
const cors = require('cors')

var corsOptions = {
  origin: 'http://localhost:4200',
  optionsSuccessStatus: 200 
}

app.use(cors(corsOptions))

app.listen(8000, () => {
  console.log('Server started!')
});

// GET ALL CATS
app.route('/api/cats').get((req, res) => {
  res.send({
    cats: [{ name: 'lilly' }, { name: 'lucy' }],
  })
})

// GET A SPECIFIC CAT
app.route('/api/cats/:name').get((req, res) => {
  const requestedCatName = req.params['name']
  res.send({ name: requestedCatName })
})

const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.route('/api/cats').post((req, res) => {
  res.send(201, req.body)
})

// UPDATE
app.route('/api/cats/:name').put((req, res) => {
  res.send(200, req.body)
})

// DELETE
app.route('/api/cats/:name').delete((req, res) => {
  res.sendStatus(204)
})

另外，这是我的猫服务：

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

interface Cat {
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class CatService {
  constructor(private http: HttpClient) {}
  getAllCats(): Observable<Cat[]> {
    return this.http.get<Cat[]>('http://localhost:8000/api/cats');
  }

  getCat(name: string): Observable<Cat> {
    return this.http.get<Cat>('http://localhost:8000/api/cats/' +   name);
  }

  insertCat(cat: Cat): Observable<Cat> {
    return this.http.post<Cat>('http://localhost:8000/api/cats/', cat);
  }

  updateCat(cat: Cat): Observable<void> {
    return this.http.put<void>(
      'http://localhost:8000/api/cats/' + cat.name,
      cat
    );
  }

  deleteCat(name: string) {
    return this.http.delete('http://localhost:8000/api/cats/' + name);
  }
}

当我运行 Angular 应用程序时，页面按预期显示，并且控制台中没有错误。

控制台记录了一个空数组，我不知道为什么应用程序没有从 server.js 中获取 cat 对象。

谁能告诉我哪里出错了？非常感谢

Answer 1

您从服务器获取响应的代码是正确的。它记录空数组的原因是因为您的 console.log 不在订阅内。由于 observable 是异步操作的，它在收到响应之前记录。如果您希望它仅在收到响应后才显示到 console.log 中，请将其移到您的 .subscribe() 中

如果您将 ngOnInit() 更改为如下所示，则在收到响应之前不会进行 console.log，因此它不应再为空，除非响应不包含任何猫。

ngOnInit() {
    const catsObservable = this.catSerivce.getAllCats();
    catsObservable.subscribe((catsData: []) => {
        this.cats = catsData;
        console.log(this.cats);
    });
}

这也可以：

export class AppComponent implements OnInit {
  title = 'malcodedTutorial';
  constructor(private catSerivce: CatService) { }

  cats = [];

  ngOnInit() {
     this.getCats();
  }

  getCats() {
    const catsObservable = this.catSerivce.getAllCats();
    catsObservable.subscribe((catsData: any[]) => {
      this.cats = catsData;
      console.log(this.cats);
    });
  }
}

Answer 2

我认为您永远不会从服务器获取数据。

在你的猫服务中

import { HttpHeaders } from '@angular/common/http';


getAllCats() {
    const headers = new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': `Bearer test}`
    });
    const options = { headers: headers };
    const url     = 'http://localhost:8000/api/cats';
    return this.http.get<Cat[]>(url, options);
}

首先，你必须确保你得到了一些数据，并且控制台中的列表不为空。

否则，如果您获取数据，并且在您的模板中没有显示任何内容，则在视图初始化后尝试

您必须添加 ngAfterViewInit

export class AppComponent implements OnInit, AfterViewInit {
  title = 'malcodedTutorial';
  constructor(private catSerivce: CatService) { }

  cats = [];

  ngOnInit() {
     this.getCats();
  }


  ngAfterViewInit() {
    this.getCats();
  }


  getCats() {
    const catsObservable = this.catSerivce.getAllCats();
    catsObservable.subscribe((catsData: any[]) => {
      this.cats = catsData;
    });
    console.log(this.cats);
  }
}