无法向具有 angular 服务的 angular 组件显示数据

Question

我可能在某个地方犯了一个愚蠢的错误，但我厌倦了四处寻找，不明白这个问题。我正在尝试显示 api 对 table 的响应，但什么也没显示。

我的apireturns关注

[{"productId":1,"productName":"tomato","productPrice":200,"productQuantity":5,"catId":1},{"productId":2,"productName":"potato","productPrice":33,"productQuantity":44,"catId":2}]

我的服务Class

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Iproducts } from '../model-ts/products';


@Injectable({
  providedIn: 'root'
})
export class GetprodlistService {
  myAppUrl: string = ""; 
  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this.myAppUrl = baseUrl;
  }
  getproducts(): Observable<Iproducts[]> {
    return this.http.get<Iproducts[]>(this.myAppUrl + 'api/admin/manageproducts/getproducts');

  }
}

Iproducts 界面 Class

export interface Iproducts {
  ProductId: number,
  ProductName: string,
  ProductPrice: number,
  ProductQuantity: number,
  CatId: number
}

Compoenent.ts 文件是：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GetprodlistService } from '../../Services/getprodlist.service';

@Component({
  selector: 'app-manage-products',
  templateUrl: './manage-products.component.html',
  styleUrls: ['./manage-products.component.css']
})
export class ManageProductsComponent implements OnInit {


  constructor(public http: HttpClient, public productservice: GetprodlistService) {
    this.getproducts();
  }
  public prodlist = [];

  getproducts() {
    this.productservice.getproducts().subscribe(
      data => this.prodlist=data);
    console.log("product list: " + this.prodlist)
  }

  ngOnInit(): void {

  }

}

我的 Component.html 文件是：

<p *ngIf="!prodlist"><em>Loading...</em></p>
<table class='table' *ngIf="prodlist">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Price</th>
      <th>Product Quantity</th>
      <th>Category ID</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let prod of prodlist">
      <td>{{ prod.ProductId }}</td>
      <td>{{ prod.ProductName }}</td>
      <td>{{ prod.ProductPrice }}</td>
      <td>{{ prod.ProductQuantity }}</td>
      <td>{{ prod.CatId }}</td>

    </tr>
  </tbody>
</table>

谢谢

Answer 1

在 Iproducts 接口文件中声明的键必须与 JSON 响应对象中的键完全匹配。

修改你的界面键 class 以小写字母开头，类似于 JSON 响应对象。

export interface Iproducts {
  productId: number,
  productName: string,
  productPrice: number,
  productQuantity: number,
  catId: number
}

Answer 2

您正在以错误的方式访问响应数据的属性。您的类型定义模型也不正确。

类型定义

export interface Iproducts {
  productId: number,
  productName: string,
  productPrice: number,
  productQuantity: number,
  catId: number
}

HTML

<p *ngIf="!prodlist"><em>Loading...</em></p>
<table class='table' *ngIf="prodlist">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Price</th>
      <th>Product Quantity</th>
      <th>Category ID</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let prod of prodlist">
      <td>{{ prod.productId }}</td>
      <td>{{ prod.productName }}</td>
      <td>{{ prod.productPrice }}</td>
      <td>{{ prod.productQuantity }}</td>
      <td>{{ prod.catId }}</td>

    </tr>
  </tbody>

无法向具有 angular 服务的 angular 组件显示数据

Can not show data to angular component with angular service

typescript

angular-services

asp.net-core

angular

类型定义

HTML