Angular Dependency Injection

Question

I built an Angular 2 website. But I don't know where it has gone wrong. I tried to debug this problem from one week now, Still not able to find any solution. I will show my code. if you need more detail. I will explain more. I can not pass information to view from my service. Error:enter image description here

I worte my productdetail.component.html like this:

<div class="thumbnail">
  <img src="http://via.placeholder.com/820x230">
  <div>
   <h4>hi</h4>
    <h4>{{product.title}}</h4>
  </div>
</div>

I worte my productdetail.component.ts like this :

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);
  }

}

I worte product servicce like this:

import { Injectable } from '@angular/core';

@Injectable()
export class ProductService {
  public products: Product[] = [
    new Product(1, 'Apple8', 8000, 5, 'new brand phone', ['phone', 'electronic products']),
    new Product(2, 'Table', 800, 4, 'white dinner table', ['furniture']),
    new Product(3, 'PC', 1000, 3, 'window 10 and I7', ['Desktop', 'electronic products']),
    new Product(4, 'LabTop', 600, 3.5, 'brand new SSID drive hard', ['labtap', 'electronic products']),
    new Product(5, 'oil heater', 50, 2.5, 'one years old  and works', ['heater', 'electronic products'])];
  public commends: Comment[] = [
     new Comment(1 , 1 , '2017-8-7:19:00' , 'Lili' , 3 , 'not so good'),
    new Comment(2 , 1 , '2017-8-8:19:30' , 'Lulu' , 4 , ' Thanks'),
    new Comment(3 , 2 , '2017-8-9:19:00' , 'Anna' , 3 , 'normal'),
    new Comment(4 , 3 , '2017-8-3:19:00' , 'yard' , 1, 'I do not like it'),
    new Comment(5 , 4, '2017-8-4:19:00' , 'Jane' , 2 , 'very good'),
    new Comment(6 , 5 , '2017-8-6:19:00' , 'Rob' , 5 , 'Excellent')];
  constructor() { }
  getProducts( ): Product[] {
    return this.products;
  }
  getProduct( id: number): Product {
    return this.products.find(item => item.id === id);
  }
  getCommentsForProduct( id: number): Comment[] {
    return this.commends.filter((comment: Comment ) => comment.productId === id );
  }

}
export class  Product {
  constructor(
    public id: number,
    public title: string,
    public price: number,
    public rating: number,
    public desc: string,
    public  categories: Array<string>
  ) {
  }
}

export class  Comment {

  constructor(public id: number, public productId: number, public timestamp: string,
              public user: string, public rating: number, public content: string) {
  }
}

I worte app.module.ts like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { NavberComponent } from './navber/navber.component';
import { FooterComponent } from './footer/footer.component';
import { SearchComponent } from './search/search.component';
import { CarouseComponent } from './carouse/carouse.component';
import { ProductComponent } from './product/product.component';
import { StarsComponent } from './stars/stars.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { HomeComponent } from './home/home.component';
import {RouterModule, Routes} from '@angular/router';
import {ProductService} from './shared/product.service';

const  routeConfig: Routes = [
  {path: 'product/:productId', component: ProductDetailComponent},
  {path: '', component: HomeComponent}

];




@NgModule({
  declarations: [
    AppComponent,
    NavberComponent,
    FooterComponent,
    SearchComponent,
    CarouseComponent,
    ProductComponent,
    StarsComponent,
    ProductDetailComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routeConfig)
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

I checked route, It work well,I guess the method doesnot work. but I think my grammer is right this method:

getProduct( id: number): Product {
    return this.products.find(item => item.id === id);
  }

I cannot recvie product information.

Answer 1

Use safe operator (?) to check the value is present ,

<div class="thumbnail">
  <img src="http://via.placeholder.com/820x230">
  <div>
   <h4>hi</h4>
    <h4>{{product?.title}}</h4>
  </div>
</div>