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

在浏览器中单独点击服务器网址，看看是否得到了预期的响应。如果这没关系，那么问题在于客户端。
在看到您的客户端代码时，一个问题显而易见。您未正确使用X中的observable。你的所有操作都应该在subscribe方法中。

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 }); }

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>

我没有得到角度为2的nodeJS服务器的响应

2 个答案: