Django模板显示ManyToMany多对多关联项问题求助

你当前代码无法正常渲染数据的核心原因是：视图传入模板的shopping_list是ShoppingList对象的QuerySet集合（包含所有购物清单记录），而ingredient_list是单个ShoppingList实例的多对多字段，直接在集合上调用.ingredient_list.all无法取到关联数据。

1. 视图层优化（可选，解决性能问题） #

提前预加载多对多关联数据，避免模板循环时产生N+1数据库查询问题：

class HomePageView(TemplateView):
    template_name = "homepage.html"
    
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['shopping_list'] = ShoppingList.objects.prefetch_related(
            'ingredient_list',
            'ingredient_list__ingredient_category'
        ).all()
        return context

2. 模板层修正 #

需要分两层循环：第一层遍历每一个购物清单实例，第二层遍历单个清单下关联的所有食材条目：

{# 第一层：遍历所有购物清单 #}
{% for single_list in shopping_list %}
<div class="shopping-list-block">
    <h4>{{ single_list.name }}</h4>
    <p>状态：{% if single_list.status %}已完成{% else %}采购中{% endif %}</p>
    
    <div class="tab-content">
        {# 第二层：遍历当前清单关联的所有食材 #}
        {% for ingredient in single_list.ingredient_list.all %}
        <div class="tab-pane fade {% if forloop.parentloop.first and forloop.first %}show active{% endif %}"
             id="list-{{ single_list.id }}"
             role="tabpanel"
             aria-labelledby="list-{{ single_list.id }}-tab">
            <p>食材名称：{{ ingredient.name }}</p>
            <p>食材分类：{{ ingredient.ingredient_category.name }}</p>
        </div>
        {% empty %}
        <p>当前清单暂无添加食材</p>
        {% endfor %}
    </div>
</div>
{% empty %}
<p>暂无创建的购物清单</p>
{% endfor %}

• 多对多关系字段只能在单个模型实例上调用，不能直接在模型的QuerySet集合上访问
• 嵌套循环中判断首次激活状态时，需要用forloop.parentloop.first获取外层循环的首次迭代标记，避免多清单下激活状态错乱
• 新增{% empty %}分支处理无数据场景，避免页面出现无意义空白

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