Question

我有一个 angular webapp，它显示类别模型中的所有类别。类别模型是产品模型的外键。我希望能够在我点击并加载该特定类别视图时过滤和查看具有该类别的所有产品。

当我点击一个类别时，它会将我带到一个详细信息页面，在那里我可以看到类别名称、图像和描述。我还可以在该详细信息视图中查看我的数据库中的所有产品。我想过滤这些，以便只有在其外键字段中包含该特定类别的产品才会显示在类别详细信息视图中，而不是所有产品。

如果有人能在这里帮助我，我将不胜感激！

这是我目前所拥有的：

部门.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CookieService } from 'ngx-cookie-service';
import { ApiService } from 'src/app/api.service';
import { Category } from '../../models/Category';
import { Product } from '../../models/Product';

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

  categories: Category[] = [];

  constructor(
    private cookieService: CookieService,
    private apiService: ApiService,
    private router: Router) { }

  ngOnInit(): void {
    this.getCategories()
  }

  getCategories(): void {
    const urToken = this.cookieService.get('ur-token')
    if (!urToken) {
      this.router.navigate(['/auth']);
    } else {

      this.apiService.getCategories().subscribe(
        data => {
          this.categories = data;
        },
        error => console.log(error)

      );
    }
  }

}

部门.component.html

<section class="pt-5 pb-5">
  <div class="container cards cards-hover">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-5  m-0 p-0" *ngFor="let category of categories">
        <app-department-item [categoryItem]="category" routerLink="details/{{ category.id }}"></app-department-item>
      </div>
    </div>
  </div>
</section>

部门详细信息.component.html

import { Component, Input, OnInit } from '@angular/core';
import { Category } from '../../models/Category';
import { ActivatedRoute, Router } from '@angular/router';
import { Location } from '@angular/common';

import { ApiService } from '../../api.service';
import { Product } from 'src/app/models/Product';

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

  category!: Category;
  products: Product[] = []
  selectedProduct?: Product;

  constructor(
    private route: ActivatedRoute,
    private apiService: ApiService,
    private location: Location,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.getCategory()
    this.getProducts()
  }

  getCategory(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.apiService.getCategory(id)
      .subscribe(category => this.category = category);
  }

  getProducts(): void {
    this.apiService.getProducts().subscribe(
      data => {
        this.products = data;
        console.log('selectedProduct', this.products);
      },
      error => console.log(error)
    );
  }

  selectProduct(product: Product) {
    this.router.navigate(['main/products/details', product.product_code]);
  }


}

部门详细信息.component.html

<div *ngIf="category">
  <div class="">
    <div class="container  ">

      <div class="row   justify-content-center header-h100  d-flex  ">
        <div class="col-md-10  shadow align-self-center card p-12 bg-light text-dark pt-4 pb-4">
          <img src="{{category.category_image}}" class="img-center img">
          <div class="text-center">
            <h1>{{category.name}}</h1><br>
            <h5>{{ category.category_description }}</h5><br>

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

      <section class="pt-5 pb-5">
        <div class="container cards cards-hover">
          <div class="row">
            <div class="col-12 col-sm-8 col-md-4  m-0 p-0" *ngFor="let product of products">
              <app-product-item [productItem]="product" (click)="selectProduct(product)"></app-product-item>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Answer 1

看来您必须弄清楚必须将哪些参数发送到 api 端点。您可以在前端过滤产品，但您真正想要的是您的 api 只提供正确的产品。所以，第一步是，搜索你的 api 文档如何过滤产品

当类别页面加载角度时按类别过滤产品

1 个答案: