Django中for loop渲染carousal产品失效问题排查

我使用Python结合Django模板实现产品轮播组件，目前幻灯片数量能正常生成（5个产品对应2张幻灯片，分别含3个和2个产品），但幻灯片内的产品卡片完全无法渲染，HTML中的row区域为空。已知传递到模板的list_of_range=[[0, 1, 2], [3, 4]]，以下是相关代码：

原index.html模板代码 #

<div class="container mt-5" >
      <div id="carouselContainer" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner justify-content-center">
          {% for i in list_of_range %}
          {% if i == list_of_range.0 %}
          <div class="carousel-item  active">
          {% else %}
          <div class="carousel-item ">
          {% endif %}
            <div class="row">
      {% for d in list_of_range.i %}

              <div class="col-sm-3 col-md-3">
                <div class="card" style="width: 18rem">
                  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyRql003EXAw9EVs6V3koKd5wXbW0Lt-yJOA&usqp=CAU" class="card-img-top" alt="..." />
                  <div class="card-body">
                    <h5 class="card-title">{{products.0.product_name}}</h5>
                    <p class="card-text">
                      Some quick example text to build on the card title and make
                      up the bulk of the card's content.
                    </p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
          {% endfor %}

原main.py视图函数代码 #

from math import ceil
from django.shortcuts import render
from .models import Product

def index(request):
    all_products_list = Product.objects.all()
    n= len(all_products_list)
    nslides = n//3+ ceil((n/3)-n//3)
    print(nslides)
    prod_range_list = []
    to_range = n
    for c in range(nslides):
        if to_range/3>=1:
            prod_range_list.append(list(range(c * 3, (c * 3) + 3)))
            to_range-= 3
        else:
            prod_range_list.append(list(range(c * 3, c * 3 + to_range)))
    print(all_products_list[0].product_id)
    print(prod_range_list)
    params = {
        'products':all_products_list,
        'no_of_slides':nslides,
        'range_slides':range(0, nslides),
        'class':'active',
        'no_in_each_slide': range(3),
        'last_slide_no':nslides-1,
        'list_of_range':prod_range_list

    }

    return render(request, 'shop/index.html', params)

解决方案 #

1. 修复模板循环语法错误 #

Django模板中，不能用list_of_range.i来获取当前循环的子列表，直接使用循环变量i即可。同时，需要根据索引d动态获取对应产品，而不是固定取products.0。

修正后的index.html核心代码：

<div class="container mt-5" >
      <div id="carouselContainer" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner justify-content-center">
          {% for i in list_of_range %}
          {% if forloop.first %}  <!-- 用forloop.first判断更简洁 -->
          <div class="carousel-item active">
          {% else %}
          <div class="carousel-item">
          {% endif %}
            <div class="row">
              {% for d in i %}  <!-- 直接遍历当前子列表i -->
              <div class="col-sm-3 col-md-3">
                <div class="card" style="width: 18rem">
                  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyRql003EXAw9EVs6V3koKd5wXbW0Lt-yJOA&usqp=CAU" class="card-img-top" alt="产品图片" />
                  <div class="card-body">
                    <h5 class="card-title">{{products[d].product_name}}</h5>  <!-- 根据索引d获取对应产品 -->
                    <p class="card-text">
                      Some quick example text to build on the card title and make
                      up the bulk of the card's content.
                    </p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
          {% endfor %}

2. 优化视图函数的幻灯片数量计算（可选） #

原代码中计算nslides的方式可以简化，用整数除法更简洁：

nslides = (n + 2) // 3  # 等价于原逻辑，5+2=7//3=2，正确

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