我在 angular 2 中没有收到来自 nodeJS 服务器的响应

Question

我是 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}`);
});

图片-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();
    });
  }
}

图片-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 控制台上，但前端在响应到来之前显示结果。请帮忙！

Answer 1

在浏览器中单独访问服务器 url，看看是否得到预期的响应。如果没问题，那就是客户端的问题。
看到您的客户端代码后，一个问题似乎很明显。您没有正确使用 ImageServiceService 中的 observable。您的所有操作都应在订阅方法内。

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

Answer 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>

我在 angular 2 中没有收到来自 nodeJS 服务器的响应

I am not getting response from nodeJS server in angular 2

node.js

mean-stack

angular