并排的桌子

Question

如何使用 twig 并排放置两个数组？

这是我的意见

---

{% for key, item in CompareArray %}
    {% for x in item %}
        <tr>
            {% if key =='last' %}
                <td> last</td>
            {% endif %}
                                
            {% if key == 'primary' %}
                <td> primary</td>
            {% endif %}
        </tr>
    {% endfor  %}
{% endfor %}

想要的输出

table,td{
  border: 1px solid black;
  padding: 1px;
}

<table>
  <tr>
    <td> last.val1 </td>
    <td> last.val2 </td>
    <td> last.val3 </td>
    <td> #### </td>
    <td> primary.val1 </td>
    <td> primary.val2 </td>
    <td> primary.val3 </td>
  </tr>
   <tr>
    <td> ... </td>
    <td> ... </td>
    <td> ... </td>
    <td> ... </td>
    <td> ... </td>   
    <td> ... </td>
    <td> ... </td>
  </tr>
<table>

Answer 1

根据共享信息，我看到了几个可能的解决方案。

但请先确认我是否正确理解您想要达到的目标。

您想要有一个表格，其中首先显示last 组的项目信息，并带有分隔列，然后在左侧显示primary 组的项目信息？从数组的屏幕截图中可以看出，组中的项目数甚至不一定相同？

首先要考虑的是，我们是否应该为primary 组和last 创建两个不同的表，并通过css 设置它们的样式，使它们看起来好像它们并排​​在一起。

{% for groupKey, items in CompareArray %}
    <table>
      {% for item in items %}
        <tr>
            <td>{{ groupKey }}.{{ item.prop1 }}</td>
            <td>{{ groupKey }}.{{ item.prop2 }}</td>
            <td>{{ groupKey }}.{{ item.prop3 }}</td>
        </tr>
      {% endfor %}
    </table>
{% endfor %}

第二种解决方案是attribute 的复杂使用，这意味着两个数组必须具有相同的键。在这里，您将遍历最大的组，然后从另一个组中添加相应的值。我正在使用一些macros 来更好地分离逻辑。名为 myTemplate 的 block 是您要插入到您希望显示数据的位置的代码。

{% block myTemplate %}
    {% if CompareArray.last|length > CompareArray.primary|length %}
        {{ _self.lastIsLonger(CompareArray.last, CompareArray.primary) }}
    {% else %}
        {{ _self.primaryIsLonger(CompareArray.last, CompareArray.primary) }}
    {% endif %}
{% endblock %}


{% macro lastIsLonger(lastGroup, primaryGroup) %}
    {% set primaryLenght = primaryGroup|length %}

    <table>
      {% for k,item in lastGroup %}
        <tr>
            {{ _self.buildElementData(item) }}
            <td> #### </td>
            {{ _self.buildElementData(loop.index <= primaryLenght ? attribute(primaryGroup, k) : {}) }}
        </tr>
      {% endfor %}
    </table>
{% endmacro %}

{% macro primaryIsLonger(lastGroup, primaryGroup) %}
   {% set lastGroupLength = lastGroup|length %}
   
   <table>
     {% for k,item in primaryGroup %}
       <tr>
           {{ _self.buildElementData(loop.index <= lastGroupLength ? attribute(lastGroup, k) : {}) }}
           <td> #### </td>
           {{ _self.buildElementData(item) }}
       </tr>
     {% endfor %}
   </table>
{% endmacro %}

{% macro buildElementData(item) %}
    <td>{{ item.prop1 ?? '' }}</td>
    <td>{{ item.prop2 ?? '' }}</td>
    <td>{{ item.prop3 ?? '' }}</td>
{% endmacro %}

如果我了解您在做什么，我认为第三种解决方案是最好的。也就是说，从 PHP 方面，您匹配了要比较的项目，因此您插入的数据看起来像这样：

[
    [
        'last' => [
            'prop1' => '...',
            'prop2' => '...',
            'prop3' => '...',
        ],
        'primary' => [
            'prop1' => '...',
            'prop2' => '...',
            'prop3' => '...',
        ],
    ], [
        'last' => [
            'prop1' => '...',
            'prop2' => '...',
            'prop3' => '...',
        ],
        'primary' => [
            'prop1' => '...',
            'prop2' => '...',
            'prop3' => '...',
        ],
    ]
];

这样，您就不会依赖肮脏的技巧，而是执行大部分属于它的逻辑。相应的生成模板生成因此更令人愉悦。

{% block myTemplate %}
    <table>
      {% for row in CompareArray %}
        <tr>

            {{ _self.buildElementData(row.last ?? {}) }}
            <td> #### </td>
            {{ _self.buildElementData(row.primary ?? {}) }}
        </tr>
      {% endfor %}
    </table>
{% endblock %}

{% macro buildElementData(item) %}
    <td>{{ item.prop1 ?? '' }}</td>
    <td>{{ item.prop2 ?? '' }}</td>
    <td>{{ item.prop3 ?? '' }}</td>
{% endmacro %}