如何在TYPO3 Fluid模板中用循环优化数量校验以重复显示图片

问题 #

需要根据amount变量的值，重复显示对应次数的图片。目前通过分别判断amount等于1、2、3来展示对应数量的图片，代码能正常运行，但希望优化成支持任意数量的通用实现。尝试用<f:for>标签写循环，但不确定第一行的正确写法，求正确的循环代码。

现有可运行代码 #

<f:if condition="{data.order.dinner.0.amount}===1">
    <f:image src="{component.componentImages}"></f:image>
</f:if>
<f:if condition="{data.order.dinner.0.amount}===2">
    <f:image src="{component.componentImages}"></f:image>
    <f:image src="{component.componentImages}"></f:image>
</f:if>
<f:if condition="{data.order.dinner.0.amount}===3">
    <f:image src="{component.componentImages}"></f:image>
    <f:image src="{component.componentImages}"></f:image>
    <f:image src="{component.componentImages}"></f:image>
</f:if>

尝试的优化代码（需修正第一行） #

<f:for each="{data.order.dinner.0.amount}" as="amount" iteration="iterator">
    <f:if condition="{iterator.index} <= {data.order.dinner.0.amount}">
          <f:image src="{component.componentImages}"></f:image>
    </f:if>
</f:for>

解决方案 #

你之前的写法错误在于<f:for>的each属性需要传入可迭代的集合/数组，而非单个数字。要实现按数字次数循环，需借助TYPO3 Fluid的range()视图助手生成从1到目标数字的序列。

正确的循环代码如下：

<f:for each="{f:count.range(from: 1, to: data.order.dinner.0.amount)}" as="number">
    <f:image src="{component.componentImages}"></f:image>
</f:for>

说明 #

• {f:count.range(from: 1, to: data.order.dinner.0.amount)}会生成包含1到amount值的数组（比如amount=3时，生成[1,2,3]）
• <f:for>遍历该数组，每次循环渲染一张图片，次数完全匹配amount的值，支持任意正整数数量
• 无需额外<f:if>判断，写法简洁直观

如果需要用到循环索引，可添加iteration属性：

<f:for each="{f:count.range(from: 1, to: data.order.dinner.0.amount)}" as="number" iteration="iterator">
    <!-- 可通过{iterator.index}或{iterator.cycle}获取循环位置 -->
    <f:image src="{component.componentImages}"></f:image>
</f:for>

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