Django模板for循环返回空列表项问题排查

问题描述 #

在Django的GroupDetail模板中遍历Group模型的joined字段时，返回了正确的4名群组成员，但同时出现了4个空列表项。相关代码如下：

Group模型代码 #

class Group(models.Model):
   leader = models.ForeignKey(User, on_delete=models.CASCADE)
   name = models.CharField(max_length=55)
   description = models.TextField()
   joined = models.ManyToManyField(User, blank=True)

模板循环代码 #

<ul>  
  {% for member in joined_members %}
  <li>{{ member }}<li>
  {% endfor %}
</ul>

浏览器渲染结果 #

<ul style="display: block;">  
  <li>joe</li>
  <li></li>
  <li>johnny</li>
  <li></li>
  <li>ralph</li>
  <li></li>
  <li>mike</li>
  <li></li>
</ul>

视图代码 #

class GroupDetail(DetailView):
    model = Group
    template_name = 'group_details.html'

    def get_context_data(self, *args, **kwargs):
        group = get_object_or_404(Group, id=self.kwargs['pk'])
        joined_members = group.joined.all()
        context = super(GroupDetail, self).get_context_data()
        context["joined_members"] = joined_members
        return context

问题原因 #

问题出在模板的for循环代码里，你把列表项的闭合标签写错了：<li>{{ member }}<li> 应该是 <li>{{ member }}</li>。

每个循环里生成的未正确闭合的<li>标签，会被浏览器自动补全一个空的闭合<li>，导致每一个成员对应两个列表项，一个有内容，一个为空。

解决方法 #

修改模板中的循环代码，将列表项的闭合标签改为正确的</li>：

<ul>  
  {% for member in joined_members %}
  <li>{{ member }}</li>
  {% endfor %}
</ul>

视图部分的上下文传递没有问题，joined_members正确获取了群组的所有成员，不需要修改。

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