无法通过手把循环遍历多维数组

Question

查看我通过的数据：

data: {
    content: [
    [
    "School Name",
    "Location",
    "Type",
    "No. eligible pupils",
    "Average points per student",
    "Average points per exam entry",
    "% obtaining two facilitating subjects"
    ],
    [
    "Colchester Royal Grammar School",
    "Colchester",
    "State",
    "349",
    "1428",
    "263.3",
    "77%"
    ], and so on...
 ]
}

我试图遍历这个数组数组，以创建一个表。 因此，对于每个数组，我需要将其包装在<tr></tr> ，对于每个数组中的每个元素，我都需要将其包装在<td></td> 。 我将需要区分第一行以同时使用<thead>和<th> ，但是此刻我正在努力使自己的头脑正确。

我的代码所做的是仅创建一个包含整个内容的<td> ，而不是多个<tr>或<td> 。

        {{#each data.content}}

            <tr>

                {{#each this}}
                    <td>{{ this }}</td>
                {{/each}}

            </tr>

        {{/each}}

Answer 1

您不能直接在模板内部使用数据，因为您要将数据对象传递给已编译的模板函数。因此，您应该使用它来引用当前上下文。

最好使用块参数来避免更多的引用，这将使代码难以理解

没有块参数

{{#each this.content}} 
     <tr>
        {{#each this}} 
            <td>{{ this }}</td> 
        {{/each}} 
     </tr>
 {{/each}}

通过使用块参数，

{{#each this.content as | rowKey, row |}} 
         <tr>
            {{#each row as | colKey, column|}} 
                <td>{{ column }}</td> 
            {{/each}} 
         </tr>
 {{/each}}

当模板变大时，它具有更多优势