时间戳

首页 > 解决方案 > 带有类别的 Laravel Angular 过滤数据不起作用

angular - 带有类别的 Laravel Angular 过滤数据不起作用

问题描述

我正在使用 laravel 和 angular 进行电子商务项目，我有这个产品的产品和品牌，在我在 laravel 中获得产品的功能中，我使用了像这样的可空参数

public function index($brand = null)
{
    if ($brand) {
        $products = Product::where('brand_id', '=', $brand)->get();

        return response()->json($products);
    } else {
        $products = Product::get();

        return response()->json($products);
    }
}

这是laravel中的api URL

Route::get('/products/{brand?}', 'App\Http\Controllers\ApiProductController@index');

当用户加入产品页面时，我需要在角度上向他显示所有产品，并且产品上方有链接，上面有 onclick 事件以选择特定品牌

有角度的 html 代码

<ul class="d-flex list-unstyled justify-content-around w-50 mx-auto mt-5">
    <li (click)="onChange(null)">All</li>
    <li *ngFor="let brand of brands" (click)="onChange(brand.id)">{{ brand.name }}</li>
</ul>

角度 ts 代码

onChange(brand: any) {
    this.favBrand = brand;
    this._ProductsService.getProducts(this.favBrand).subscribe(data => {
      this.shuffle(data);
      this.products = data;

      this.page = 0;
      this.totalItems = this.products.length;
    });
}

constructor(public _HttpClient: HttpClient, public _BrandsService: BrandsService, public 
_ProductsService: ProductsService, public _Router: Router) {
    _ProductsService.getProducts(this.favBrand).subscribe(data => {
      this.shuffle(data);
      this.products = data;
      console.log(data);

      this.page = 0;
      this.totalItems = this.products.length;
    });

    _BrandsService.getBrands().subscribe((data) => {
      this.brands = data;
    }, (err) => {
      console.log(err);
    });
  }

角度产品服务代码

  getProducts(brand?: any): Observable<any> {
    return this._HttpClient.get(`http://localhost/mobitech/public/api/products/${brand}`);
  }

当我在没有输入任何品牌参数的情况下加载页面时，产品没有加载，当我点击特定品牌时，产品加载良好，为什么所有产品都没有显示

标签： angularlaravel

解决方案

您可以有一个默认品牌，当您重新加载时从 API 获取数据，并且每当用户更改品牌时，您已经拥有该功能。

您可以在此处添加或可能是 TS 文件。

getProducts(brand: any = 'defaultBrand'): Observable<any> {
    return this._HttpClient.get(`http://localhost/mobitech/public/api/products/${brand}`);
  }

如果您不想显示默认品牌列表，只需向用户显示一条消息以与您拥有的下拉菜单或表单进行交互。

推荐阅读