Question

我已成功实施了这么多次，但我必须在这里遗漏一些东西。我的ngOnInit（）函数调用DataService并返回如下所示的产品。

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

  constructor(private dataService: DataService, private route: 
ActivatedRoute) { }

  ngOnInit() {
    this.getProduct();
  }

  getProduct() {
    this.route.params.subscribe(params => {
     let id = params["id"];

      this.dataService.getProduct(id).subscribe((product: Product) => {
        this.product = product;
        console.log("ProductCardComponent.product = " + 
JSON.stringify(this.product));
      })
    })
  }

}

但产品未显示在模板中：

<div class="container-fluid">
  <div class="col-sm-12">
    <div *ngIf="product">
      <div class="col-sm-1"></div>
      <div class="col-sm-5">
        <p>{{product.name}}</p>
        <p>{{product.price}}</p>        
     </div>

      <div class="col-sm-5">
        fadfasdfadfasdf
      </div>
    </div>
  </div>
</div>

控制台日志：

ProductCardComponent.product = [{"_id":"59809d53734d1d58c9ad47f8","producttype":"washer","name":"Bosch SHE3AR75UC 24 Built-In Dishwasher - Stainless Steel","brand":"Bosch","model":"MVWX655DW","price":539,"list_price":699,"description":"Bosch Ascenta dishwasher SHE3AR75UC offers outstanding Bosch quietness, efficiency and a rich feature set as a superior alternative to all-plastic tub dishwashers. Our exclusive stainless steel wash tub with a polypropylene base makes purchasing an easy choice when it comes to deciding on features, quietness, and value.","rating":4,"item_no":"637743","special_value":true,"warranty":"ANSI Certified,CSA Certified","specification":{"lowes_exclusive":false,"color":"White","high_efficiency":true,"automatic_load_balancing":true,"product_capacity":"4.3 cu ft","large_items_cycle":true,"exclusive_cycle":"PowerWash","maximum_spin_speed":"660","water_levels":"Auto-sensing","number_of_rinse_cycles":"2"},"image":["bosch3.jpg","maytagBravoWasher2.jpg","maytagBravoWasher3.jpg","maytagBravoWasher4.jpg"],"feature":["Large 4.8 cu. ft. oven capacity with space for dinner and dessert","Versatile cooktop with multiple element options up to 1,800 watts","Bake Assist Temp presets make cooking even more convenient"]}]

Answer 1

从您的控制台日志中看来，您得到的是array，而不是object。所以你必须抓住第一个元素并分配。试试这个。

this.product = product[0];

Angular 2：数据未出现在模板中

1 个答案: