angular5.0报错:Type 'Product[]' is not assignable to type ' Product'.

[小蚂蚁oo]

app.component.html
<app-navbar></app-navbar>
<div class="container">
<div class="row">
<div class="col-md-3">
<app-search></app-search>
</div>
<div class="col-md-9">
<router-outlet></router-outlet>
</div>
</div>
</div>
<app-footer></app-footer>
app.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}

product..component.html
<div *ngFor="let product of products | async" class="col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<div class="caption">
<h4 class="pull-right">{{product.id}}</h4>
<h4><a [routerLink]="['/product',product.id]">{{product.title}}</a></h4>
</div>
<app-stars [rating]="product.rating"></app-stars>
</div>
</div>

product.component.ts
import {Component, OnInit} from '@angular/core';
import {Product, ProductService} from "../shared/product.service";
import {FormControl} from "@angular/forms";
import 'rxjs/Rx';
import {Observable} from "rxjs/Observable";

@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

private products: Observable<Product[]>;


constructor(private productService: ProductService) {

}

ngOnInit() {
this.products = this.productService.getProducts();

}


}

product.detail.component.html
<div class="thumbnail">
<img src="../../assets/uploads/4.png" alt="">
<div>
<h4 class="pull-right">{{product?.price}}元</h4>
<h4>{{product?.title}}</h4>
<p>{{product?.desc}}</p>
</div>
<div>
<p class="pull-right">{{comments?.length}}</p>
<p>
<app-stars [rating]="product?.rating"></app-stars>
</p>
</div>
</div>

<div class="well">
<div>
<button class="btn btn-success" (click)="isCommentHidden = !isCommentHidden">发表评论</button>
</div>
<div [hidden]="!isCommentHidden">
<div>
<app-stars [readOnly]="false" [(rating)]="newRating"></app-stars>
<textarea [(ngModel)]="newComment"></textarea>
</div>
<div>
<button (click)="addComment()">提交</button>
</div>
</div>
<div class="row" *ngFor="let comment of comments">
<hr>
<div class="col-md-12">
<app-stars [rating]="comment.rating"></app-stars>
<span>我是ID为{{comment.id}}的商品</span>
<span>购买时间为{{comment.timestamp}}</span>
<span>商品评价:{{comment.content}}</span>
</div>
</div>
</div>

product.detail.component.ts
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {Comment, Product, ProductService} 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;

isCommentHidden = true;

comments: Comment[];

newRating: number = 5;

newComment: string = '';

constructor(private routeInfo: ActivatedRoute,
private productService: ProductService) {
}

ngOnInit() {
let productId: number = this.routeInfo.snapshot.params['productId'];
this.productService.getProduct(productId).subscribe(
product => this.product = product
);
this.productService.getCommentsForProductId(productId).subscribe(
comments => this.comments = comments
);
}

addComment() {
let comment = new Comment(0, this.product.id, new Date().toISOString(), 'someone',
this.newRating, this.newComment);
this.comments.unshift(comment);

let sum = this.comments.reduce((sum, comment) =>
sum + comment.rating, 0);

this.product.rating = sum / this.comments.length;

this.newComment = null;
this.newRating = 5;
this.isCommentHidden = true;
}
}
错误出在product.detail.component.ts的this.product那里，但不知道如何解决