
//components/header
//data.ts
var cartList:object = [
{
"isSelected": true,
"productCover": "https://img3.doubanio.com/view/subject/m/public/s33510542.jpg",
"productName": "纸上行舟",
"productInfo": "青年作者黎幺短篇小说首度结集",
"productPrice": 57.33,
"productCount": 3,
"id": "0001"
},
{
"isSelected": true,
"productCover": "https://img3.doubanio.com/view/subject/m/public/s33497735.jpg",
"productName": "我可能得抑郁症了!舟",
"productInfo": "青年作者黎幺短篇小说首度结集",
"productPrice": 54.26,
"productCount": 2,
"id": "0002"
},
{
"isSelected": true,
"productCover": "https://img3.doubanio.com/view/subject/m/public/s33474961.jpg",
"productName": "绕日飞行",
"productInfo": "驯马、飞行、成长、爱情",
"productPrice": 22.67,
"productCount": 3,
"id": "0003"
}
]
export default cartList;
//.html
<div class="wrap">
<h1 class="head">购物车</h1>
<nz-table #basicTable>
<thead>
<tr>
<th>
全选
<input type="checkbox" [(ngModel)]="checked" (change)="handleChange($event)">
</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody *ngFor="let item of cartList">
<tr>
<td>
<input type="checkbox"
(change)="onChange(item.isSelected)"
[(ngModel)]="item.isSelected">
</td>
<td class="cover-name">
<img class="cover" src={{item.productCover}} alt="">
<p>{{item.productName}}</p>
</td>
<td>¥{{item.productPrice}}</td>
<td>
<nz-input-number [(ngModel)]="item.productCount" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
</td>
<td>¥{{subTotal(item.productPrice,item.productCount)}}</td>
<td>
<button nz-button nzType="danger" (click)="handleClick(item)">删除</button>
</td>
</tr>
</tbody>
</nz-table>
<h2 class="total">总价:¥{{sum(total)}}</h2>
</div>
//.ts
import { Component, OnInit } from '@angular/core';
import cartList from './data'
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
public cartList:any = cartList;
public checked:boolean=true;
constructor() { }
ngOnInit() {
}
handleChange(){
this.cartList.forEach(item=>item.isSelected=this.checked)
}
onChange(){
this.checked=this.cartList.every(item=>item.isSelected)
}
subTotal(a,b){
return (a*b).toFixed(2)
}
sum(){
var total = 0;
this.cartList.forEach(item=>{
if(item.isSelected){
total = item.productCount*item.productPrice+total;
}
})
return total.toFixed(2);
}
handleClick(item){
console.log(item);
var cartList = this.cartList.filter(value=>value!==item);
this.cartList = cartList;
// for(let i = 0; i < this.cartList.length; ++i){
// if (this.cartList[i].id === id) {
// this.cartList.splice(i,1);
// }
// }
}
}
//.css
.wrap{
width: 100%;
}
.head{
text-align: center;
color: brown;
}
.cover{
width: 80px;
margin-right: 10px;
}
.cover-name{
display: flex;
align-items: center;
}
.total{
color: brown;
position: fixed;
bottom: 0;
z-index: 10;
}
//app.component.html
<app-header></app-header>