angular的一些问题

引入第三方类库

1.安装依赖

npm install jquey --save

2.引入项目

在angular-cli.json

"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/bootstrap.js"
],

3.安装类型描述文件

npm install @types/jquery --save

(目的:让typesscript识别jquery的代码）

 

==============

生成组件

1.ng g component footer

 ============

 

循环数据

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">{{product.price}}</h4>
<h4><a href="">{{product.title}}</a></h4>
<p>{{product.desc}}</p>
</div>
<div>
<app-star></app-star>
</div>
</div>
</div>

---

import { Component, OnInit } from '@angular/core';

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

private products:Array<Product>;

constructor() { }

ngOnInit() {
this.products=[
new Product(1,"第一个商品",1.99,3.5,"第一个商品描述",["电子产品"]),
new Product(2,"第二个商品",2.99,1.5,"第二个商品描述",["电子产品","硬件"]),
new Product(3,"第三个商品",3.99,4.5,"第三个商品描述",["电子产品"]),
new Product(4,"第四个商品",4.99,3.5,"第四个商品描述",["电子产品","硬件"]),
new Product(5,"第五个商品",5.99,2.5,"第五个商品描述",["电子产品","硬件"]),
new Product(6,"第六个商品",6.99,2.5,"第六个商品描述",["电子产品"]),
]
}

}

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

}
}