Angular Dependency Injection

Question

Ich baute eine Angular 2-Website. Aber ich weiß nicht, wo es falsch gelaufen ist. Ich habe versucht, dieses Problem seit einer Woche zu beheben, immer noch keine Lösung zu finden. Ich werde meinen Code zeigen. wenn Sie mehr Details benötigen. Ich werde mehr erklären. Ich kann keine Informationen an meinen Service weitergeben. Fehler: enter image description here

ich worte meine productdetail.component.html wie folgt aus:

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

ich meine productdetail.component.ts wie diese worte:

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

 
}

worte I Produkt Servicce wie folgt aus:

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 app.module.ts wie diese worte:

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 Route überprüft Es funktioniert gut Ich denke, die Methode funktioniert nicht. aber ich denke, mein grammer Recht ist diese Methode:

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

ich nicht Produktinformationen recvie kann.

Answer 1

Verwenden safe operator (?) zu überprüfen, der Wert vorhanden ist,

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