3-1购物车

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http'
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  public list:any
  public checked:boolean = true
  constructor(public http:HttpClient) { }
  ngOnInit() {
    var url:string = "http://yapi.demo.qunar.com/mock/36046/cart"
    this.http.get(url).subscribe(res=>{
      this.list =res
      console.log(this.list)
    })
  }
  handleChange(){
    this.list.forEach(item=>item.isSelected=this.checked)
  }
  onChange(){
    this.checked=this.list.every(item=>item.isSelected)
  }
  sub(a,b){
    return (a*b).toFixed(2)
  }
  handleDelete(data){
    var list = this.list.filter(value=>value!==data);
    this.list =list
  }
  sum(){
    var total=0;
    for(let i=0;i<this.list.length;i++){
      if(this.list[i].isSelected){
        total=total+this.list[i].productCount*this.list[i].productPrice
      }else{
        continue;
      }
    }
    return total.toFixed(2)
  }
}

<div>总价:${{sum()}}</div>
<nz-table #basicTable [nzData]="dataSet">
    <thead>
      <tr>
        <th><label nz-checkbox [(ngModel)]="checked" (change)="handleChange($event)">全选</label></th>
        <th>商品</th>
        <th>数量</th>
        <th>价格</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of list">
        <td>
          <label nz-checkbox (change)="onChange(data.isSelected)" [(ngModel)]="data.isSelected"></label>
        </td>
        <td>
            <img [src] ="data.productCover">
            <p>{{data.productName}}</p>
        </td>
        <td>
          <nz-input-number [(ngModel)]="data.productCount" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
        </td>
        <td>${{data.productPrice}}元</td>
        <td>
          ${{sub(data.productCount,data.productPrice)}}元
        </td>
        <td>
          <button nz-button nzType="danger" (click)="handleDelete(data)">删除</button>
        </td>
      </tr>
    </tbody>
  </nz-table>