I recently completed an Angular 2 website, but I've run into some issues that I cannot seem to debug. I've spent the past week trying to find a solution but have had no luck. Below, I've included some snippets of my code. Feel free to ask for more details if needed. The main problem I'm facing is that I cannot pass information from the service to the view.
Here's a snippet of my productdetail.component.html:
<div class="thumbnail">
<img src="http://via.placeholder.com/820x230">
<div>
<h4>hi</h4>
<h4>{{product.title}}</h4>
</div>
</div>And here's a snippet of my productdetail.component.ts:
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Product, ProductService, Comment } from '../shared/product.service';
@Component({
selector: 'app-product-detail',
templateUrl: './product-detail.component.html',
styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
product: Product;
comments: Comment [ ];
constructor(private routeInfo: ActivatedRoute, private productService: ProductService) { }
ngOnInit() {
const productId: number = this.routeInfo.snapshot.params['productId'];
console.log(productId);
this.product = this.productService.getProduct(productId);
this.comments = this.productService.getCommentsForProduct(productId);
}
}Additionally, here's a snippet of my product.service:
import { Injectable } from '@angular/core';
@Injectable()
export class ProductService {
public products: Product[] = [
new Product(1, 'Apple8', 8000, 5, 'new brand phone', ['phone', 'electronic products']),
// More product details
];
// More service methods
}Finally, here's a snippet of my app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// More imports
@NgModule({
declarations: [
AppComponent,
// More components
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
// More imports
],
providers: [ProductService],
bootstrap: [AppComponent]
})
export class AppModule { }I suspect that the issue lies within my getProduct method in the product.service file. However, I've double-checked the route and it seems to be working fine. Any help would be greatly appreciated as I'm unable to receive product information at the moment.