Ich bekomme keine Antwort von NodeJS Server in Winkel 2

Question

Ich bin Neuling zu MEAN Stack-Entwicklung. Also, bitte hilf mir das Problem herauszufinden.

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

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

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

} 

The Länge des Arrays ist Null und ich kann nicht herausfinden warum. Die Antwort kommt nach einer Weile auf der Konsole von nodejs, aber das Frontend zeigt das Ergebnis an, bevor die Antwort kommt. Bitte helfen Sie!

Answer 1

1. Hit der Server-URL separat im Browser und sehen Sie, ob Sie die erwartete Antwort erhalten. Wenn das in Ordnung ist, liegt das Problem beim Client.

2. Wenn Sie Ihren Clientcode sehen, scheint ein Problem offensichtlich zu sein. Sie verwenden die observable von ImageServiceService nicht ordnungsgemäß. Alle Ihre Manipulationen sollten innerhalb der Subscribe-Methode sein.

   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. Wenn Sie die beobachtbaren mit etwas in der Ansicht angezeigt werden, dann betrachten. Verwendung async pipe

Answer 2

Der Code in den subscribe Handler nicht synchron ausgeführt. Ihre console.log-Anweisung wird also ausgeführt, bevor Sie eine Antwort von Ihrem Server erhalten. Ich sehe Ihre image-view.component.html Auszeichnung nicht. Aber ich glaube, Sie müssen die async Pipe in Ihrer gebundenen Option verwenden.

private data$: Observable<Image[]>; 

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

Und Sie HTML:

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