ui.png

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