第32天~

这个的上一篇在https://ithelp.ithome.com.tw/articles/10233130
这里要来写当搜寻不到里面有的东西时，的显示:
从档案:product-list-grid.component.html

修改程序码:

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

          <!--内容区的显示-->
          <div *ngFor="let tempProduct of products" class="col-md-3">

            <div class="product-box">
              <img src="{{ tempProduct.imageUrl }}" class="img-responsive">

            <h1>{{ tempProduct.name}}</h1>
          <div class="price">{{ tempProduct.unitPrice | currency:'USD'}}</div>
          <a href="#" class="primary-btn">Add to cart</a>

          </div>
        </div>

      <div *ngIf="products?.length ==0" class="alert alert-warning col-md-12" role="alert">
        找不到这个品项

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

後面要从产品的明细~
先使用http://localhost:8080/api/products/1 来确认後端有正常的启动

使用VS CODE 的terminal来新增 明细的component(元件)
使用语法ng generate component components/ProductDetails

到app.module.ts档案新增Routes

{path: 'products/:id', component: ProductDetailsComponent},

再到product-list-grid.component.html这个档案.准备去增加产品的名称和照片
到目前的程序码id会反红

让我们继续做下去~就可以消失

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

          <!--内容区的显示-->
          <div *ngFor="let tempProduct of products" class="col-md-3">

            <div class="product-box">

              <a routerLink="/products/{{ tempProduct.id }}">


              <img src="{{ tempProduct.imageUrl }}" class="img-responsive">
            </a>

            <a routerLink="/products/{{ tempProduct.id }}">

            <h1>{{ tempProduct.name}}</h1>

          </a>
          <div class="price">{{ tempProduct.unitPrice | currency:'USD'}}</div>
          <a href="#" class="primary-btn">Add to cart</a>

          </div>
        </div>

      <div *ngIf="products?.length ==0" class="alert alert-warning col-md-12" role="alert">
        找不到这个品项

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

预告解决方法是:

src\app\app.module.ts
-------------------------------------------------------------------------

const routes: Routes = [
{path: 'products/:prodId/:catId', component: ProductDetailsComponent},
];

src\app\components\product-list\product-list-grid.component.html
-------------------------------------------------------------------------

<a routerLink="/products/{{ tempProduct.id }}/{{currentCategoryId}}">
<img src="{{ tempProduct.imageUrl }}" class="img-responsive">
<h1>{{ tempProduct.name }}</h1>
</a>

src\app\components\product-details\product-details.component.html
-------------------------------------------------------------------------

<a routerLink="/category/{{categoryId}}" class="mt-5">Back to Product List</a>

src\app\components\product-details\product-details.component.ts

-------------------------------------------------------------------------

const PROD_ID = 'prodId';
const CAT_ID = 'catId';
 
@Component({
selector: 'app-product-details',
templateUrl: './product-details.component.html',
styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {
 
  product: Product;
  categoryId: number; <======== Add
 
  constructor(
    private productService: ProductService,
    private route: ActivatedRoute
  ) { }
 
  ngOnInit() {
    this.categoryId = +this.route.snapshot.paramMap.get(CAT_ID); <======== Add
    this.route.paramMap.subscribe(() => {
      this.handleProductDetails();
    });
  }
}

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