第45天~

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

开始做表格给客户填写资料

用新增Component

从app.module.ts 档案 增加语法

再到 cart-details.component.html档案

再到checkout.component.html 档案 增加CSS语法

<div class="main-content">

  <p>checkout works!</p>

</div>

再来看结果~

按了按钮到~

後来发现居然REMOVE 跟CHECKOUT的按钮要滑鼠移上才会反白，
发现是按键前後各要加

<div></div>

完成的cart-details.component.html程序码是:

<div class="main-content">
  <div class="section-content section-content-p30">
      <div class="container-fluid">
       <div *ngIf="cartItems.length > 0">
          <table class="table table-bordered">
              <tr>
                  <th width="20%">Product Image</th>
                  <th width="50%">Product Detail</th>
                  <th width="30%"></th>
              </tr>
              <tr *ngFor="let tempCartItem of cartItems">
                  <td>
                      <img src="{{ tempCartItem.imageUrl }}" class="img-responsive" width="150px" />
                  </td>
                  <td>
                      <p>{{ tempCartItem.name }}</p>
                      <p>{{ tempCartItem.unitPrice | currency: 'USD' }}</p>
                  </td>
                  <td>
                      <div class="items">
                          <label>Quantity:</label>

                           <div class="row no-gutters">
                            <div class="col">
                             <button (click)="incrementQuantity(tempCartItem)" class="btn btn-primary btn-sm">

                             <i class="fas fa-plus"></i>

                             </button>

                            </div>

                          <div class="col ml-4 mr-2">

                            {{ tempCartItem.quantity}}

                          </div>

                          <div class="col">
                            <button (click)="decrementQuantity(tempCartItem)" class="btn btn-primary btn-sm">
                            <i class="fas fa-minus"></i>
                            </button>
                           </div>

                          <div class="col-8"></div>

                           </div>
                      </div>

                      <div>
                        <button (click)="remove(tempCartItem)" class="btn btn-primary btn-sm mt-2">Remove</button>
                      </div>

                      <p class="mt-2">Subtotal: {{ tempCartItem.quantity * tempCartItem.unitPrice | currency: 'USD' }}</p>
                  </td>
              </tr>
              <tr>
                  <td colspan="2"></td>
                  <td style="font-weight: bold">
                      <p>Total Quantity: {{ totalQuantity }}</p>
                      <p>Shipping: FREE</p>
                      <p>Total Price: {{ totalPrice | currency: 'USD' }}</p>

                      <div>
                        <a routerLink="/checkout" class="btn btn-primary">Checkout</a>
                      </div>

                  </td>
            </tr>

          </table>
      </div>

     <div *ngIf="cartItems.length ==0" class="alert alert-waring col-md-12" role="alert">

      购物车是空的

     </div>



  </div>
</div>
</div>

再到app.module.ts档案去新增ReactiveFormsModule:

再到checkout.component.ts档案

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

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

  checkoutFormGroup: FormGroup;

  constructor(private forBuilder: FormBuilder) { }

  ngOnInit(): void {

    this.checkoutFormGroup = this.forBuilder.group({

      customer:this.forBuilder.group({

          firstName:[''],
          lastName:[''],
          email:['']

        })
    });
  }

}

再到 styles.css档案增加CSS语法:

因为程序码太长~所以按CTRL+SHIFT+F搜寻要的文字:

改变数值成;padding:10% 30% 10% 5%

• 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。

再回到checkout.component.html档案-修改程序码-来做表格:
外框:

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

      <form [formGroup]="checkoutFormGroup">



      </form>
    </div>
  </div>
</div>

含内文:

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

      <form [formGroup]="checkoutFormGroup">



          <div formGroupName="customer" class="form-area">

            <h3>客户姓名 </h3>

            <div class="row">
              <div class="col-md-2"><label>First Name</label></div>
               <div class="col-md-9">

                <div class="input-space">
                  <input formControlName="firstName" type="text">
                </div>
               </div>
            </div>
          </div>

         <div class="text-center">

        <button type="submit" class="btn btn-info">Purchase</button>

         </div>



      </form>
    </div>
  </div>
</div>

後来发现卡在

不会显示~是因为in app.module.ts少加入CheckoutComponent
完整的程序码是:

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

      <form [formGroup]="checkoutFormGroup">



          <div formGroupName="customer" class="form-area">

            <h3>客户姓名 </h3>

            <div class="row">
              <div class="col-md-2"><label>First Name</label></div>
               <div class="col-md-9">

                <div class="input-space">
                  <input formControlName="firstName" type="text">
                </div>
               </div>
            </div>
          </div>

         <div class="text-center">

        <button type="submit" class="btn btn-info">Purchase</button>

         </div>



      </form>
    </div>
  </div>
</div>

购物车选-点-按CHECKOUT长这样~

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