如何通过Angular调用Strapi REST API按关联主题查询产品？

因为Products和Topics是多对多关系，你可以通过Strapi REST API的filters参数结合关联字段实现查询，以下是具体步骤和代码示例：

核心查询逻辑 #

Strapi的多对多关联会在产品模型中生成对应关联字段（比如topics），你可以通过过滤该字段的属性（比如主题名称name）筛选目标产品。

请求URL格式 #

以查询关联「Health」主题的产品为例，构造API地址如下：

GET /api/products?filters[topics][name][$eq]=Health&populate=topics

• filters[topics][name][$eq]=Health：指定筛选规则，匹配topics关联中name等于Health的产品
• populate=topics：可选参数，用于返回产品关联的主题详情，若只需要产品基础数据可省略

Angular代码实现 #

在Angular服务中封装查询方法，使用HttpClient发起请求：

1. 产品服务中的查询方法 #

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ProductService {
  private apiUrl = 'http://your-strapi-domain/api/products'; // 替换为你的Strapi实际API地址

  constructor(private http: HttpClient) {}

  getProductsByTopic(topicName: string): Observable<any> {
    const params = new HttpParams()
      .set('filters[topics][name][$eq]', topicName)
      .set('populate', 'topics'); // 按需添加，不需要主题详情可删除该行

    return this.http.get(this.apiUrl, { params });
  }
}

2. 在组件中调用服务 #

import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {
  products: any[] = [];

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.productService.getProductsByTopic('Health').subscribe({
      next: (response) => {
        this.products = response.data; // Strapi返回数据默认包裹在data字段中
      },
      error: (err) => console.error('产品查询失败:', err)
    });
  }
}

注意事项 #

• 确保Strapi后台已配置产品API的访问权限（比如公开访问或配置JWT认证），否则会返回403权限错误
• 若主题名称包含空格或特殊字符，Angular的HttpParams会自动处理URL编码，无需手动操作
• 可扩展多条件过滤，比如同时按行业筛选：添加filters[industries][name][$eq]=Medical参数，多个条件默认是AND逻辑

内容的提问来源于stack exchange，提问作者Justin Ledoux