Angular и Node.js: Get Call анализирует данные в объект - PullRequest
Новая
       17

Angular и Node.js: Get Call анализирует данные в объект

0 голосов
/ 11 мая 2018

Я новичок в Angular и пытаюсь создать панель управления для растений. Поэтому я хочу отображать данные из базы данных MySQL в мое приложение Angular. Чтобы передать заводские данные в Angular, я использую node.js. Мне уже удалось представить список моих растений. Теперь я хочу отобразить детали для каждого растения. Но данные не отображаются, потому что объект plant не определен. Если я пытаюсь напрямую вызвать свой сервер node.js через браузер, он работает и отображает данные в формате JSON.

Я обнаружил, что данные правильно передаются в мое приложение в формате JSON, и я могу отображать их в виде строки JSON на своем веб-сайте. Я думаю, что есть проблема, чтобы проанализировать полученные данные с сервера в объект plant , потому что я не могу получить vaule с использованием точечной нотации, такой как {{plants.id}} в HTML. Когда я пытаюсь это сделать, я получаю сообщение об ошибке: 

ERROR TypeError: Cannot read property 'id' of undefined
    at Object.eval [as updateRenderer] (PlantDetailComponent.html:11)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
    at checkAndUpdateView (core.js:13849)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)

ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}

Метод getPlant аналогичен методу getPlants , который работает и правильно анализирует данные.

Как правильно разобрать данные в объекте завода?

Вот мой угловой код:

plant.service: 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { catchError, map, tap } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { Plant } from './plant';

@Injectable()
export class PlantService {
  private plantsUrl = 'api/plants';

  constructor(private http: HttpClient) { }

  getPlants(): Observable<Plant[]> {
    return this.http.get<Plant[]>(this.plantsUrl)
      .pipe(
        catchError(this.handleError('getPlants', []))
      );
  }

  getPlant(id: number): Observable<Plant> {
    const url = `${this.plantsUrl}/${id}`;
    return this.http.get<Plant>(url).pipe(
      catchError(this.handleError<Plant>(`getPlant id=${id}`))
    );
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    };
  }
}

растительно-detail.component: 

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { Plant } from '../plant';
import { PlantService } from '../plant.service';

@Component({
  selector: 'app-plant-detail',
  templateUrl: './plant-detail.component.html',
  styleUrls: ['./plant-detail.component.css']
})
export class PlantDetailComponent implements OnInit {
  plant: Plant;

  constructor(private route: ActivatedRoute,
    private plantService: PlantService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getPlant();

  }

  getPlant(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.plantService.getPlant(id)
      .subscribe(plant => this.plant = plant);
  }

  goBack(): void {
    this.location.back();
  }

}

Компонент и сервис зарегистрированы в app.module. Я также зарегистрировал HttClientModule.

мой Node Server: 

var express = require("express");
var mysql = require('mysql');
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'plant_care',
});
var app = express();

app.get("/api/plants", function(req, res) {
  connection.query('SELECT * FROM plant', function(err, rows, fields) {
    if (!err)
      res.send(rows);
    else
      console.log('Error while performing Query.');
  });
});

app.get("/api/plants/:id", function(req, res) {
  const requestedID = req.params.id;
  connection.query('SELECT * FROM plant WHERE ID = ' + requestedID, function(err, rows, fields) {
    if (!err)
      res.send(rows);
    else
      console.log('Error while performing Query.');
  });
});

app.listen(3000, function() {
  console.log("Running...");
});

1 Ответ

0 голосов
/ 14 мая 2018

Я решил это.

Мой сервер отправил данные из базы данных MySQL в виде массива.

Но моя функция в plant.service не ожидаламассив.Таким образом, у меня было два пути решения проблемы.Либо я меняю сервисную функцию, которая ожидает массив, либо я изменяю сервер, который больше не отправляет одну запись в виде массива.

Я решил изменить функцию сервера: 

app.get("/api/plants/:id", function(req, res) {
  const requestedID = req.params.id;
  connection.query('SELECT * FROM plant WHERE ID = ' + requestedID, function(err, rows, fields) {
    if (!err)
      res.send(rows[0]);
    else
      console.log('Error while performing Query:\n' + err);
  });
});
...