html - 无法使用 ngFor 在 html 中打印列表

问题描述

我是角度和前端的新手。我正在尝试调用 rest Api 来获取产品列表。然后我试图在 html 页面中打印它们。

product.component.html

<div class="page-title">Product List</div>
<div class="bgblue">
    <div class="product-preview-container">
        <ul *ngIf="!emptyProductList">
            <p>Available Products</p>
            <li *ngFor="let product of products">
            <p>Product Name  : {{ product.productName }}</p>
            <p>Product Code  : {{ product.productCode }}</p>
            <p>Product Price : {{ product.productPrice }}</p>
            </li>
        </ul>
        <ul *ngIf="emptyProductList">
            <p>No Product Found  </p>
        </ul>
    </div>
</div>

product.component.ts

export class ProductComponent implements OnInit {

  errorMessage = '';
  emptyProductList = true;
  products: Product[];

  constructor(private productService: ProductService) {
    this.products = [];
  }

  ngOnInit() {
    console.log('Called ngOnInit method');
    this.productService.fetchProductList().subscribe(
      (productList: Product[]) => {
        this.products = productList; 
        if(this.products.length>0){
          this.emptyProductList = false;
          console.log('not empty');
        }       
      }, err => {
        this.errorMessage = err.error;
      })
  }

}

更新

产品.service.ts

export class ProductService {

  constructor(private http: HttpClient, private adapter: ProductAdapter) { }

  fetchProductList(): Observable<Product[]> {
    return this.http.get(PRODUCT_LIST_API, httpOptions).pipe(
      map((data: any[]) => [data].map((item) => this.adapter.adapt(item)))
    );
  }
  
}

产品模型.ts

export class Product {
    constructor(
      public id: number,
      public productCode: string,
      public productName: string,
      public productPrice: number
    ) {}
  }

  @Injectable({
    providedIn: "root",
  })
  export class ProductAdapter implements Adapter<Product> {
    adapt(item: any): Product {
      return new Product(item.id, item.productCode, item.productName, item.productPrice);
    }
  }

更新productList值：

[Product]
0: Product
    id: undefined
    productCode: undefined
    productName: undefined
    productPrice: undefined
__proto__: Object
length: 1

Postman中的响应json：

[
    {
        "id": 1,
        "productCode": "P01",
        "productName": "Pencil",
        "productPrice": 10.0
    }
],

输出：

Product List

Available Products
Product Name :
Product Code :
Product Price :

我在这里做错了什么？

标签： htmlangularjs

html - 无法使用 ngFor 在 html 中打印列表

问题描述

解决方案

推荐阅读