角度2のnodeJSサーバーからの応答がありません

Question

私は平均的なスタック開発に慣れています。だから、問題を理解するのを助けてください。

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

1. ブラウザーで別途サーバーのURLにアクセスして、期待される応答が得られるかどうかを確認してください。これが問題なければ、クライアントに問題があります。

2. お客様のクライアントコードを見ると、1つの問題が明らかです。 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 }); }

3. ビューで何かを表示するために、観察を使用している場合、 は考えます。 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>