我没有从角度 2 中的 nodeJS 服务器得到响应 [重复]答案

【问题标题】：I am not getting response from nodeJS server in angular 2 [duplicate]我没有从角度 2 中的 nodeJS 服务器得到响应 [重复]
【发布时间】：2018-05-25 08:27:43
【问题描述】：

我是 MEAN 堆栈开发的新手。所以，请帮我找出问题所在。

app.js

const express = require('express');

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


app.use(express.static(path.join(__dirname, './darwin-src/public')));


const port = 3000;

app.get('/images', (req, res) => {
    console.log('In server');
    var data;
    var Scraper = require ('images-scraper')
    , google = new Scraper.Google();
    google.list({
        keyword: 'banana',
        num: 10,
        detail: true,
        nightmare: {
            show: false
        }
    })
    .then(function (data) {
        console.log('first 10 results from google', data);
        res.end("" + data);
    })
    .catch(function(err) {
        console.log('err', err);
    });
});

app.listen(port, () => {
    console.log(`Starting the server at port ${port}`);
});

image-service.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { Image } from './model/image';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/of';

@Injectable()
export class ImageServiceService {

  constructor(private http: Http) { }

  private serverApi = 'http://localhost:3000';

  public getImages(image: string): Observable<Image[]> {
    console.log('Inside Service');
    let URI = `${this.serverApi}/images`;
    return this.http.get(URI)
    .map(function(res) {
      return res.json();
    });
  }
}

image-view.component.ts

import { Component, OnInit } from '@angular/core';
import { ImageServiceService } from '../image-service.service';

import { Image } from '../model/image';

@Component({
  selector: 'app-image-view',
  templateUrl: './image-view.component.html',
  styleUrls: ['./image-view.component.css']
})
export class ImageViewComponent implements OnInit {
  private data: Image[] = [];
  constructor(private imageService: ImageServiceService) { }

  ngOnInit() {
  }

  onSubmit(image: string) {
    console.log(image);
    this.imageService.getImages(image).subscribe(response => this.data = response);
    console.log(this.data.length);
  }

}

数组的长度为零，我不知道为什么。响应会在一段时间后出现在 nodejs 控制台上，但前端会在响应到来之前显示结果。请帮忙！

【问题讨论】：

标签： node.js angular mean-stack

【解决方案1】：

在浏览器中分别点击服务器 url，看看是否得到预期的响应。如果这没问题，那么问题出在客户端。
在查看您的客户端代码时，一个问题似乎很明显。您没有正确使用来自ImageServiceService 的observable。您的所有操作都应该在 subscribe 方法中。

onSubmit(image: string) { this.imageService.getImages(image).subscribe(response => { this.data = response; console.log(this.data.length); // Do other manipulations that you wish to do }); }
如果您使用 observable 在视图中显示某些内容，那么考虑。使用async pipe

【讨论】：

【解决方案2】：

subscribe 处理程序中的代码未同步执行。因此，您的 console.log 语句在您从服务器获得响应之前执行。我没有看到您的 image-view.component.html 标记。但是，我相信您需要在绑定选项中使用async 管道。

private data$: Observable<Image[]>;

onSubmit(image: string) {
    console.log(image);
    this.data$ = this.imageService.getImages(image);
}

还有你的 HTML：

<div *ngFor="let image of data$ | async">
    {{image.value}}
</div>

【讨论】：