You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Django模板循环时空状态提示重复显示问题解决方案

问题原因

重复渲染空提示的问题截图
重复渲染问题的核心是空状态逻辑放错了位置:

  • 空状态提示的触发条件是整个区块没有任何符合条件的投资记录,属于区块级全局判断
  • 你把提示写在了{% for %}循环内部、单条记录的{% if %}判断的{% else %}分支中,每遍历到1条不符合当前区块状态判断的记录,就会触发一次提示渲染,有多少条不匹配的记录就会输出多少次提示
  • 另外当前两次遍历全量investments集合再逐行判断状态的写法存在冗余,会产生不必要的模板渲染开销。
修复方案

第一步:后端视图层拆分数据集(推荐)

数据过滤逻辑应该放在视图层处理,不要在模板里逐行判断投资状态,提前把两类投资拆分后再传给模板,从根源上减少模板层冗余判断:

# 视图层示例代码
def investment_list(request):
    all_investments = Investment.objects.filter(user=request.user)
    # 拆分有效、已结束两类投资
    active_investments = all_investments.filter(is_active=True)
    ended_investments = all_investments.filter(is_active=False)
    return render(request, 'your_template_path.html', {
        'active_investments': active_investments,
        'ended_investments': ended_investments
    })

第二步:模板层用{% empty %}标签处理空状态

Django的{% for %}标签内置了{% empty %}分支,专门用于处理循环无任何可渲染项的场景,只会在没有匹配记录时渲染一次空提示,不会重复输出。
修正后的模板核心代码如下(原有卡片样式、字段渲染逻辑保持不变,仅调整循环和空状态位置):

<h1 class="md:ml-[11.5em] mt-7 mb-0 font-bold"> Active Plan</h1>
<!-- 直接遍历拆分好的有效投资集合 -->
{% for investment in active_investments %}              
    <div class="row justify-center my-5 md:my-3">
        <div class="col-md-9 border-2 border-gray-300 rounded-lg">
            <div class="pricing-table-item bg-athens-gray px-4 md:py-0">                          
                    <div class="space-y-10 md:flex justify-between items-end">
                        <div>
                            <h1 class="font-bold capitalize" style="font-family: Open Sans;">{{investment.plan}}</h1>
                            <div class="text-sm my-2" style="font-family: Open Sans;"><span class="text-gray-400">Invested Amount -</span>  <span class="font-bold">{{investment.deposit_amount}} USD</span></div>
                        </div>
                        <div class="flex justify-between align-items-center">
                            <div>
                                <h1 class="font-bold capitalize" style="font-family: Open Sans;">{{investment.created_at}}</h1>
                                <div class="text-sm my-2 text-gray-400" style="font-family: Open Sans;">Start Date</div>
                            </div>
                            <div class="ml-3  mr-3">
                                <i class="fa-solid fa-arrow-right-long text-gray-400"></i>
                            </div>
                            <div>
                                <h1 class="font-bold capitalize" style="font-family: Open Sans;">{{investment.due_date}}</h1>
                                <div class="text-sm my-2 text-gray-400" style="font-family: Open Sans;">End Date</div>
                            </div>
                        </div>
                    <div class="md:flex justify-center items-center">
                            <div>
                                {% if investment.plan == "Basic - Daily 2% for 180 Days" %}
                                <h1 class="font-bold" style="font-family: Open Sans;">${{investment.investment_return}}</h1>
                                {% else %} 
                                <h1 class="font-bold" style="font-family: Open Sans;">$ {{investment.investment_return}}</h1>
                                {% endif %}
                                <div class="text-sm my-2 text-gray-400" style="font-family: Open Sans;">Total Return</div>
                            </div>
                    </div>
                        <div>
                            {% if investment.plan == "Basic - Daily 2% for 180 Days" %}
                            <h1 class="font-bold" style="font-family: Open Sans;">$ {{investment.basic_interest}}</h1>
                            {% else %}                 
                            <h1 class="font-bold" style="font-family: Open Sans;">$ {{investment.premium_interest}}</h1>
                            {% endif %}
                            <div class="text-sm my-2 text-gray-400" style="font-family: Open Sans;">Net Profit Earn</div>
                        </div>
                </div>
            </div>
        </div>
    </div>                
<!-- 空状态仅在无任何有效投资时渲染1次 -->
{% empty %}
<p>您暂无有效投资</p>
{% endfor %}

<h1 class="md:ml-[11.5em] mt-7 mb-0 font-bold"> Recently Ended</h1>
<!-- 直接遍历拆分好的已结束投资集合 -->
{% for investment in ended_investments %}
<div class="">
    <div class="row justify-center my-5 md:my-3">
        <div class="col-md-9 border-2 border-gray-300 rounded-lg">
            <div class="pricing-table-item bg-athens-gray px-4 md:py-0">                          
                    <div class="space-y-10 md:flex justify-between items-end">
                        <div>
                            <h1 class="font-bold capitalize" style="font-family: Open Sans;">{{investment.plan}}</h1>
                            <div class="text-sm my-2" style="font-family: Open Sans;"><span class="text-gray-400">Invested Amount -</span>  <span class="font-bold">{{investment.deposit_amount}} USD</span></div>
                        </div>
                        <div class="flex justify-between align-items-center">
                            <div>
                                <h1 class="font-bold capitalize" style="font-family: Open Sans;">{{investment.created_at}}</h1>
                                <div class="text-sm my-2 text-gray-400" style="font-family: Open Sans;">Start Date</div>
                            </div>
                            <div class="ml-3  mr-3">
                                <i class="fa-solid fa-arrow-right-long text-gray-400"></i>
                            </div>
                            <div>
                                <h1 class="font-bold capitalize" style="font-family: Open Sans;">{{investment.due_date}}</h1>
                                <div class="text-sm my-2 text-gray-400" style="font-family: Open Sans;">End Date</div>
                            </div>
                        </div>
                    <div class="md:flex justify-center items-center">
                            <div>
                                {% if investment.plan == "Basic - Daily 2% for 180 Days" %}
                                <h1 class="font-bold" style="font-family: Open Sans;">${{investment.investment_return}}</h1>
                                {% else %} 
                                <h1 class="font-bold" style="font-family: Open Sans;">$ {{investment.investment_return}}</h1>
                                {% endif %}
                                <div class="text-sm my-2 text-gray-400" style="font-family: Open Sans;">Total Return</div>
                            </div>
                    </div>
                        <div>
                            {% if investment.plan == "Basic - Daily 2% for 180 Days" %}
                            <h1 class="font-bold" style="font-family: Open Sans;">$ {{investment.basic_interest}}</h1>
                            {% else %}                 
                            <h1 class="font-bold" style="font-family: Open Sans;">$ {{investment.premium_interest}}</h1>
                            {% endif %}
                            <div class="text-sm my-2 text-gray-400" style="font-family: Open Sans;">Net Profit Earn</div>
                        </div>
                </div>
            </div>
        </div>
    </div>                                   
</div>
<!-- 已结束投资空状态 -->
{% empty %}
<p>您暂无已结束的投资</p>
{% endfor %} 

不推荐在不改后端的前提下用模板层变量标记的方式实现:Django默认模板不支持在循环中修改外部作用域变量,需要安装第三方模板扩展包才能实现,逻辑冗余且可维护性差。

内容的提问来源于stack exchange,提问作者Thaddeaus Iorbee

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 11:27:17