Невозможно отобразить данные для компонента angular с сервисом angular - PullRequest
Новая
       19

Невозможно отобразить данные для компонента angular с сервисом angular

0 голосов
/ 16 марта 2020

Возможно, я где-то совершаю глупую ошибку, но я устал искать по сторонам, не понял проблемы. Я пытаюсь показать ответ API на таблицу, но ничего не отображается вообще.

Мой API возвращает следующий ответ

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

Мой класс обслуживания 

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 Interface 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 {

  }

}

Мой Компонент. 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>

Спасибо

Ответы [ 2 ]

3 голосов
/ 16 марта 2020

Вы неправильно обращаетесь к свойствам данных ответа. Ваша модель определения типа также неверна.

Определение типа 

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>
1 голос
/ 16 марта 2020

Ключи, объявленные в файле интерфейса Iproducts , должны точно соответствовать ключам в объекте ответа JSON.

Измените ключи вашего класса интерфейса, чтобы сначала они начинались со строчных букв аналогично объекту ответа JSON. 

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