第41天~

这个得上一篇:https://ithelp.ithome.com.tw/articles/10258409

这里要做放入购物车要结帐的清单

用cmd语法新增component:ng generate service services/cart

这里从app.module.ts档案增加Routes
会自动import:

然後从cart-status.component.html档案增加购物车的ICON
所以修正 <a href="shopping-detail.html">语法

变成<a routerLink="/cart-details">:

从cart-details.component.html档案加入div语法:

按住购物车显示:

然後到cart-details.component.html档案慢慢加入语法变成有表格:

<div class="main-content">
  <div class="section-content section-content-p30">
    <div class="container-fluid">

      <table class="table tabled-bordered">
        <tr>

           <th width="20%">产品照片</th>
           <th width="50%">产品明细</th>
           <th width="30%"></th>

        </tr>


      </table>



    </div>

  </div>


</div>

目前长这样:

然後到cart-details.component.html档案慢慢更改成CSS语法:

<table class="table table-bordered">

表格底部就变成蓝色了

然後到cart-details.component.ts档案.这里 也是要按listCartDetails浮在上面修正=宣告方法:

变成:

import { CartItem } from 'src/app/common/cart-item';
import { Component, OnInit } from '@angular/core';

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

  CartItem: CartItem[] =[];
  totalPrice: number =0;
  totalQuantity: number =0;




  constructor() { }

  ngOnInit(): void {
    this.listCartDetails();
  }
  listCartDetails() {
    throw new Error("Method not implemented.");
  }

}

然後再到档案方法里面的语法=项目+价格=加总:
这里有发生CartItems大小写不同会反红.再看後面是否会有影响

import { CartService } from './../../services/cart.service';
import { CartItem } from 'src/app/common/cart-item';
import { Component, OnInit } from '@angular/core';

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

  cartItems: CartItem[] =[];
  totalPrice: number =0;
  totalQuantity: number =0;




  constructor(private CartService: CartService) { }

  ngOnInit(): void {
    this.listCartDetails();
  }
  listCartDetails() {

    this.cartItems = this.CartService.CartItems;

    this.CartService.totalPrice.subscribe(
      data =>this.totalPrice = data

    );

    this.CartService.totalQuantity.subscribe(

      data =>this.totalPrice = data

    );

    this.CartService.computeCartTotals();




  }

}

这个得下一篇:https://ithelp.ithome.com.tw/articles/10258476