发表于： 2017-05-20 23:10:02
3 879
今天完成的事情：
import { Injectable } from '@angular/core';
@Injectable()
export class ProductService {
private products: Product[] = [
new Product(1, '第一个商品', 1.99, 3.5, '这是一个商品,我的第一个angular程序', ['电子产品', '硬件设备']),
new Product(2, '第二个商品', 2.99, 2.5, '这是二个商品,我的第二个angular程序', ['图书']),
new Product(3, '第三个商品', 5.99, 4.5, '这是三个商品,我的第三个angular程序', ['硬件设备']),
new Product(4, '第四个商品', 7.99, 1.5, '这是四个商品,我的第四个angular程序', ['电子产品', '硬件设备']),
new Product(5, '第五个商品', 2.99, 4.5, '这是五个商品,我的第五个angular程序', ['电子产品', '硬件设备']),
new Product(6, '第六个商品', 3.99, 2.5, '这是六个商品,我的第六个angular程序', ['图书'])
];
private comments : Comment[] = [
new Comment(1, 1, "2017-02-02 22:22:22", "张三", 3, "东西不错"),
new Comment(2, 1, "2017-03-03 23:22:22", "李四", 4, "东西是不错"),
new Comment(3, 1, "2017-04-04 21:22:22", "王五", 2, "东西挺不错"),
new Comment(4, 2, "2017-05-05 20:22:22", "赵六", 4, "东西还不错")
]
constructor() { }
getProducts():Product[] {
return this.products;
}
getProduct(id: number): Product {
return this.products.find((product) => product.id == id);
}
getCommentsForProductId(id:number) :Comment[] {
return this.comments.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 ategories: string[]) {
}
}
export class Comment {
constructor(
public id: number,
public productId: number,
public timestamp: string,
public user: string,
public rating: number,
public content: string
) {
}
}
<div class="thumbnail">
<img [src]="imgUrl">
<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 class="row" *ngFor="let comment of comments" >
<hr>
<div class="col-md-12">
<app-stars [rating]="comment.rating"></app-stars>
<span>{{comment.user}}</span>
<span class="pull-right">{{comment.timestamp}}</span>
<p></p>
<p>{{comment.content}}</p>
</div>
</div>
</div>
明天计划的事情：
继续学习
遇到的问题：
无
收获：
注入知识
返回列表
评论