无法从我的服务中获取数据到我的组件中答案

【问题标题】：Cant get the data from my service into my component无法从我的服务中获取数据到我的组件中
【发布时间】：2020-01-16 07:34:56
【问题描述】：

我最近在尝试创建一个简单的 Web 应用程序来提高我的技能时遇到了 Angular 8 的问题。我正在尝试制作一个表格网络应用程序，表格的 html 看起来像这样，并使用从组件类中的服务填充的产品数组。

 <table class = "table" *ngIf = "Products && Products.length!=0">
                <thead>
                    <tr>
                        <th>
                            <!-- ternary statement to change the image text -->
                            <button class = "btn btn-primary" (click)= 'toggleImage()'>{{ showImage ? 'Hide Image' : 'Show Image'}}</button>

                        </th>
                        <th>Product</th>
                        <th>Code</th>
                        <th>Available</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>Rating</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor = "let product of filteredProducts">
                        <td>
                            <!-- //the image will only show if show image is true -->
                            <img *ngIf = 'showImage' 
                             [src]='product.imageUrl'
                             [title]='product.productName | uppercase'
                             [style.width.px]= 'imageWidth'
                             [style.margin.px]="imageMargin">
                        </td>
                        <td>{{product.productName}}</td>
                        <td>{{product.productCode | lowercase | convertToSpaces: '-'}}</td>
                        <td>{{product.releaseDate}}</td>
                        <td>{{product.description}}</td>
                        <td>{{product.price | currency: 'EUR'}}</td>
                        <td><pm-star [rating]= "product.starRating" (ratingClicked)= "onRatingClicked($event)"></pm-star></td>

                    </tr>

                </tbody>

            </table>

我写了一个类似这样的服务类

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators'
import { IProduct } from '../../app/components/product-list/product';

@Injectable({
  providedIn: 'root'
})

export class ServiceService{
  private productUrl = "http://localhost:4200/assets/data.json"
  constructor(private http: HttpClient) { }

  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productUrl)
      .pipe(
        tap(data => console.log('All: ' + JSON.stringify(data))),
        catchError(this.handleError));
  }
}

该服务包含一个 getProducts 函数，该函数从 json 数据返回一个 observable，该数据只是一个本地文件，并将数据打印到控制台。

JSON文件包含多个对象，如

 {
    "productId": 5,
    "productName": "Hammer",
    "productCode": "TBX-0048",
    "releaseDate": "May 21, 2019",
    "description": "Curved claw steel hammer",
    "price": 8.9,
    "starRating": 4.8,
    "imageUrl": "assets/images/hammer.png"
  },

在我的 component.ts clss 中，我在 ngOnInit 函数中有一些逻辑，我认为这些逻辑可以订阅服务并将数据添加到相关数据结构中。这是component.ts类

import { Component, OnInit } from '@angular/core';
import { IProduct } from './product';
import { ServiceService } from '../../service/service.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})

export class ProductListComponent implements OnInit {
  pageTitle = 'Product List';
  imageWidth = 50;
  imageMargin = 2;
  showImage = false;
  errorMessage: string;

  _listFilter = '';
  get listFilter(): string {
    return this._listFilter;
  }
  set listFilter(value: string) {
    this._listFilter = value;
    this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
  }

  filteredProducts: IProduct[] = [];
  products: IProduct[] = [];

  constructor(private productService: ServiceService) {

  }

  onRatingClicked(message: string): void {
    this.pageTitle = 'Product List: ' + message;
  }

  performFilter(filterBy: string): IProduct[] {
    filterBy = filterBy.toLocaleLowerCase();
    return this.products.filter((product: IProduct) =>
      product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
  }

  toggleImage(): void {
    this.showImage = !this.showImage;
  }

  ngOnInit(): void {
    this.productService.getProducts().subscribe({
      next: products => {
        this.products=products,
        this.filteredProducts = this.products;
      },
      error: err => this.errorMessage =err
    });
  }
}

正如您在 ngOnInit 中看到的那样，我订阅了 observable，并且还使用来自 observable 的产品数据填充 products 数组，但我的 products 数组仍然是空的，并且当绑定到 .html 时屏幕上不会显示任何数据班级。感谢您提供任何高级帮助。

【问题讨论】：

您发现了什么问题？数据是否应该显示但没有显示？
是的，这就是问题
你如何尝试显示它？您在控制台中看到任何错误吗？
你的 json 数据是什么？
控制台没有错误。数据应显示在表格中。

标签： angular rxjs angular-httpclient

【解决方案1】：

问题出在模板中，你有一个*ngIf：

<table class="table" *ngIf="Products && Products.length!=0">

您的组件没有变量Products，它是products，带有小写的P。此外，您实际上不需要检查length，因为如果数组没有项目，角度甚至不会尝试渲染*ngFor。但可以肯定的是，始终保持安全；）但只需检查products.length 就足够了，不需要!=0。

对 *ngIf 进行以下更改：

<table class="table" *ngIf="products && products.length">

【讨论】：