Recently, I've been working with a mock json file that contains a list of products to be displayed on a Product page. My goal is to select a specific product, such as 'Product 1', and have only that product's information displayed on the Product Detail page. However, I'm encountering issues where the Product Detail page is showing information for all products and not properly displaying the selected product's name. As a self-taught individual, I'm unsure if the mistake lies within the typescript or json file. Can someone help point me in the right direction to resolve this issue?
Here is the code snippet:
product.component.html
<h4>Department 1</h4>
<div class="application-card" routerLink="/productDetails"
*ngFor="let product of products; let i = index">
{{ product.product_name }}
</div>
product.component.ts
import { Component, OnIt } from '@angular/core';
import {HttpClient} from "@angular/common/http";
@Component ({
selector: 'app-product',
templateURL: './product.component.html',
styleURLs: [./product.component.css']
})
export class ProductComponent implements OnInit {
products: any ""
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.allProducts();
}
allProducts() {
this.http.get<ProductList>(url: 'http://localhost:3000/productList).subscribe(next: data => {
this.products = data;
})
}
}
interface ProductList {
product_name: string;
product_detail_1: string;
product_detail_2: string;
product_detail_3: string;
}
productdetails.component.html
<h1>Product Details - {{ product.product_name }}</h1>
<p *ngFor="let product of products">
{{ product.product_details_1 }}
{{ product.product_details_2 }}
{{ product.product_details_3 }}
</p>
productdetails.component.ts
import { Component, OnIt } from '@angular/core';
import {HttpClient} from "@angular/common/http";
@Component ({
selector: 'app-productdetails',
templateURL: './productdetails.component.html',
styleURLs: [./productdetails.component.css']
})
export class ProductDetailsComponent implements OnInit {
products: any ""
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.allProducts();
}
allProducts() {
this.http.get<ProductList>(url: 'http://localhost:3000/productList).subscribe(next: data => {
this.products = data;
})
}
}
interface ProductList {
product_name: string;
product_detail_1: string;
product_detail_2: string;
product_detail_3: string;
}
products.json
{
"productList": [
{
"product_name": "Product 1",
"product_details_1": "1st detail about Product 1",
"product_details_2": "2nd detail about Product 1",
"product_details_3": "3rd detail about Product 1"
},
{
"product_name": "Product 2",
"product_details_1": "1st detail about Product 2",
"product_details_2": "2nd detail about Product 2",
"product_details_3": "3rd detail about Product 2"
},
{
"product_name": "Product 3",
"product_details_1": "1st detail about Product 3",
"product_details_2": "2nd detail about Product 3",
"product_details_3": "3rd detail about Product 3"
},