如何在Ruby on Rails数组分组中显示正确的索引值？

我有一张名为products的表：

|id| |name|
 81   monitor
 82   keyboard
 83   mouse
 84   headphone

控制器products_controller.rb代码如下：

def index
  @products = Product.all
end

期望实现如下显示效果：

|Nº|  |name|         |Nº|   |name|
 1     monitor        3      mouse 
 2     keyboard       4      headphone

我尝试使用each_slice编写如下代码：

<table>
  <tr>
    <td>Nº</td>
    <td>Product</td>
  </tr>
  
  <% @products.each_slice(2).each_with_index do |grouped_array,row_index| %> 
  <tr>
     <% grouped_array.each_with_index do |product, column_index| %>
     <td><%= column_index + 1 %></td>
     <td><%= product.name %></td>
     <% end %>
  </tr>
  <% end %>
</table>

使用each_slice得到的结果为：

|Nº|  |name|         |Nº|   |name|
 1     monitor        1      mouse 
 2     keyboard       1      headphone

我还尝试使用in_groups_of：

<% @products.in_groups_of(2).each_with_index do |grouped_array,row_index| %> 
<tr>
   <% grouped_array.each_with_index do |product, column_index| %>
   <td><%= column_index + 1 %></td>
   <td><%= product.name %></td>
   <% end %>
</tr>
<% end %>

使用in_groups_of得到的结果同样错误，索引值重复。

请问如何修改代码以实现期望的正确索引值显示？

问题出在你用的是组内局部索引（column_index），而不是全局的产品序号。可以通过以下两种方式修复：

方法一：计算全局索引 #

利用行索引和列索引计算出每个产品的全局序号：

<table>
  <tr>
    <td>Nº</td>
    <td>Product</td>
    <td>Nº</td>
    <td>Product</td>
  </tr>
  
  <% @products.each_slice(2).each_with_index do |grouped_array, row_index| %> 
  <tr>
     <% grouped_array.each_with_index do |product, column_index| %>
     <!-- 计算全局序号：行索引*每组数量 + 列索引 + 1 -->
     <td><%= row_index * 2 + column_index + 1 %></td>
     <td><%= product.name %></td>
     <% end %>
  </tr>
  <% end %>
</table>

方法二：先获取全局索引再分组 #

先给每个产品绑定全局索引，再进行分组渲染，逻辑更直观：

<table>
  <tr>
    <td>Nº</td>
    <td>Product</td>
    <td>Nº</td>
    <td>Product</td>
  </tr>
  
  <% @products.each_with_index.map { |p, i| [i+1, p] }.each_slice(2) do |group| %>
  <tr>
    <% group.each do |index, product| %>
    <td><%= index %></td>
    <td><%= product.name %></td>
    <% end %>
  </tr>
  <% end %>
</table>

说明 #

• 方法一通过row_index * 2 + column_index +1计算：第一行（row_index=0）的两个产品序号是0*2+0+1=1和0*2+1+1=2；第二行（row_index=1）的两个是1*2+0+1=3和1*2+1+1=4，正好符合需求。
• 方法二先把每个产品和它的全局序号（i+1）组成数组，再按每组2个切片，直接取预计算好的序号，可读性更强。

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