Question

product.component.ts 是一个组件，我在其中使用httpclient Service从后端获取数据，但是当我在ngOninit（）中显示product变量时，却无法定义，所以它们都不会显示在视图中，但是当使用console.log（）记录product变量的值时，我从后端获取了所有产品列表，我在这里做错了吗？下面是代码。

product.component.ts

import { Component, OnInit } from '@angular/core';
import {Product} from '../app-models/product.model';
import {ProductService} from '../app-services/product.service';

@Component({
  selector: 'app-product-listing',
  templateUrl: './product-listing.component.html'
})
export class ProductListingComponent implements OnInit {
  product: Product[];

  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.productService.getAllProducts().subscribe(
      response => {
        this.product = response;
        console.log(JSON.stringfy(response));
      },
      error => {
        console.log('error:: ' + JSON.stringify(error));
      }
    );
  }
}

product.component.html

<div class="featured_slider_item" *ngFor="let p of product">
   <div class="border_active"></div>
   <div class="product_item discount d-flex flex-column align-items-center justify-content-center text-center">
      <div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="../../assets/images/featured_1.png" alt=""></div>
      <div class="product_content">
         <div class="product_price discount">&#8377; {{ p.offerPrice }}<span><del>&#8377; {{ p.price }}</del></span></div>
         <div class="product_name"><div><a>{{ p.code }}</a></div>
      </div>
      <div class="product_extras">
        <div class="product_color">
          <input type="radio" checked name="product_color" style="background:#b19c83">
          <input type="radio" name="product_color" style="background:#000000">
          <input type="radio" name="product_color" style="background:#999999">
        </div>
        <button class="product_cart_button" (click)="addToCart( p )">Add to Cart</button>
      </div>
    </div>
    <div class="product_fav"><i class="fas fa-heart"></i></div>
    <ul class="product_marks">
      <li class="product_mark product_discount">-25%</li>
      <li class="product_mark product_new">new</li>
    </ul>
  </div>
</div>

productService.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {ApplicationProperties} from '../properties/applicationproperties';
import {Product} from '../app-models/product.model';

@Injectable()
export class ProductService {
  private getAllProductsUrl = ApplicationProperties.BackendRestUrl + 'getAllProducts';

  constructor(private httpClient: HttpClient) {}

  getAllProducts() {
    return this.httpClient.get<Product[]> (this.getAllProductsUrl);
  }
}

product.model.ts

export interface Product {
  id: number;
  code: string;
  description: string;
  stock: number;
  price: number;
  offerPrice: number;
  image: Blob;
  createdOn: string;
  lastUpdatedOn: string;
}

Answer 1

其中包含一个外部JS，它阻止了产品的展示。该代码工作正常！

Answer 2

在您编写了http get请求的service.ts中，您可以进行以下更改

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {ApplicationProperties} from '../properties/applicationproperties';
import {Product} from '../app-models/product.model';
import {map} from 'rxjs/add/operator/map;
@Injectable()
export class ProductService {
 result:Product[];
private getAllProductsUrl = ApplicationProperties.BackendRestUrl + 'getAllProducts';

constructor(private httpClient: HttpClient) {}

getAllProducts() {
  return this.httpClient.get<Product[]> (this.getAllProductsUrl).map(res=>this.result=res.json().data);
  }
}

Angular无法在视图中获取属性内容

2 个答案: