Question

我试图用角度和节点来做一些事。

我的其余API已完成（使用node和mysql制作）;

尝试在HTML模板上显示我的JSON数据，但我没有成功...

谢谢你，如果你可以帮助我:)。

我的服务：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { map } from "rxjs/operators";
import { Produto} from './produto';
import { catchError } from 'rxjs/operators';
import { Observable, of } from 'rxjs';

@Injectable()

export class ProductService {

constructor(private _http : Http){ }

getProdutos(): Observable<Produto[]>{
    return this._http
        .get("http://localhost:8080/produtos").pipe(
        map(res => res.json()));
    }

}

HTML：

             <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Description</th>
            <th>Category</th>
            <th>Actions</th>
        </tr>

        <!-- Use *ngFor directive to loop throught our list of products. -->
        <tr *ngFor="let produto of produtos">
            <td>{{produto.nome}}</td>
            <td>{{produto.descricao}}</td>
            <td>{{produto.valor}}</td>
            <td>{{produto.src}}</td>
            <td>

组件

import { Component, OnInit, Input, Output, EventEmitter } from 
'@angular/core';
import { ProductService } from '../product.service';
import { Observable } from 'rxjs';
import { Produto } from '../produto';

@Component({
    selector: 'app-read-products',
    templateUrl: './read-products.component.html',
    styleUrls: ['./read-products.component.css'],
    providers: [ProductService]
})

export class ReadProductsComponent implements OnInit {

    produtos: Produto[];

    constructor(private productService: ProductService){}
    ngOnInit(){
        this.productService.getProdutos()
            .subscribe(produtos =>
                this.produtos=produtos['records']
            );
    }
}

类别：

export class Produto {
  constructor(
      public produto_id: number,
      public nome: string,
      public descricao: string,
      public valor: number,
      public src: string
  ){}
}

我的json响应（转到链接时）：

[{"produto_id":10,"nome":"caderno","descricao":"maycon","valor":23.2212,"src":"aasssaa"}]

在我的项目中有更多课程，如果有人认为问题存在于另一个课程中，请告诉...

OBS：使用角度CLI创建并遵循TUTORIAL

Answer 1

如果从后端获得未命名的数组，则应将结果直接分配给productos：

this.productService.getProdutos()
        .subscribe(produtos =>
            this.produtos=produtos
        );

如果您在productos中获取数组数据，那么您的HTML ngFor循环将正常工作：

<tr *ngFor="let produto of produtos">
        <td>{{produto.nome}}</td>
        <td>{{produto.descricao}}</td>
        <td>{{produto.valor}}</td>
        <td>{{produto.src}}</td>
        <td>
 </tr>

Answer 2

您应该在map函数中返回更改的响应。喜欢这个

#!/bin/sh
$DBG_SH
flags="-v"
case $1 in
"live") # Live server
  LDAPSERVER=ldapprod
  ADMIN="uid=bason,ou=people,o=real.com"
  pass=""
  ;;
"dev") # test system
  LDAPSERVER=ldapdev
  ADMIN="uid=bason,ou=people,o=real.com"
  pass=""
 ;;
*)
  echo "Usage: $0 live|dev [ldif filename] [cont]"
  echo "       live|dev      - specify live or dev server"
  echo "       ldif filename - specify filename containing ldif"
  echo "       cont          - continue on error"
  exit 1 ;;
esac

if [ ! -f "$2" ];then
  /bin/echo -n "Path to LDIF file: "
  read PATH_TO_LDIF
else
  PATH_TO_LDIF="$2"
fi
if [ "$3" = "cont" ];then
  flags="$flags -c"
fi
if [ `uname -s` = "Linux" ];then
  flags="$flags -x"
fi
if [ -z "$pass" ]; then
  /bin/echo -n "Password: "
  read -s pass
  echo
fi

ldapmodify $flags -h $LDAPSERVER -D "$ADMIN" -w $pass -f $PATH_TO_LDIF
exit $?

执行console.log以检查您是否正在接收数据并确定数据的结构。对于您提到的json响应，在组件中只需将其直接分配给数组

return this._http .get("http://localhost:8080/produtos").pipe( map(res => return res.json())); }

希望这有帮助。

＆＃34;获取＆＃34;请求工作（？）但不显示数据

2 个答案: