角度依赖注入

Question

我构建了一个Angular 2网站。但我不知道哪里出了问题。我试图从一周内调试这个问题，仍然无法找到任何解决方案。我将显示我的代码。如果你需要更多的细节。我会解释更多。 我无法通过信息从我的服务中查看。 错误：enter image description here

我又写道我productdetail.component.html这样的：

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

我又写道我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); 
 
    } 
 

 
}

我又写道产品servicce这样的：

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

我又写道app.module.ts这样的：

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 { }

我查路线，它运作良好，我猜这个方法不起作用。 但我觉得我的语法是正确的 这种方法：

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

我不能recvie产品信息。

Answer 1

使用safe operator (?)检查值存在，

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